我有这个代码用于水平和垂直居中。它运作良好，除非内容多于拟合，内容被切断。有没有办法用css限制它，所以它不会超出可见区域？我不想涉及javascript。
.b {
padding: 0;
position: absolute;
margin: 0;
width: 100%;
max-width: 500px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}<div class="a">
<div class="b">dui ut erat. Phasellus nibh magna, tempor vitae, dictum sed, vehicula sed, mauris. In enim arcu, porta vel, dictum eu, pretium a, ipsum. Donec cursus, lorem ac posuere viverra, sem tellus accumsan dolor, vel accumsan tortor est et est. Praesent molestie.
Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla. Nullam vel ante et nunc accumsan viverra. Vestibulum nulla justo, tristique nec, tincidunt eget, ultricies sollicitudin,
nulla. Proin dui ante, consectetur a, tincidunt in, mattis ut, ipsum. Sed tristique. Mauris et sapien. Quisque risus. Ut laoreet hendrerit mi. Nam vestibulum viverra diam. Nullam eros ipsum, rutrum ut, ultricies sed, congue sed, est. Pellentesque
porttitor. Donec dictum urna eu mi. Maecenas in lorem. Vestibulum in ipsum. Praesent ac nunc. Donec vitae lectus. Etiam commodo velit ut mi. Duis egestas, quam faucibus interdum tincidunt, enim sem tincidunt tellus, sed condimentum tellus tortor u
mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam ollicitudin, nisi egestas scelerisque
pretium, odio enim sodales metus, venenatis vulputate arcu quam eget purus. Fusce convallis mattis nunc. Fusce non nunc. Maecenas nec tellus a mi ornare auctor. Proin magna nunc, congue ut, dapibus eu, placerat vitae, erat. Nam egestas pretium mauris.
Cras posuere, est nec egestas scelerisque, tellus justo scelerisque nisi, at consequat ante dolor eget diam. Phasellus pharetra, lectus vel molestie tincidunt, orci tellus dapibus odio, vel semper lacus tortor vitae metus.Vestibulum accumsan enim
nec ipsum. Nunc cursus sapien. Etiam fermentum luctus arcu. condimentum neque molestie tincidunt. Fusce egestas, est ut fringilla facilisis, quam purus blandit dui, eget egestas mauris nibh ut diam. Phasellus volutpat. Sed fringilla tellus in sem.
Curabitur dignissim nunc id arcu. Nulla facilisi. In imperdiet. Aliquam enim. Nullam hendrerit purus. Suspendisse lectus orci, commodo eget, luctus ac, venenatis id, magna. In hac habitasse platea dictumst. Fusce aliquam. Donec ut nisi ac diam posuere
imperdiet. Cras est enim, consequat non, pretium at, molestie quis, sapien. Suspendisse porta, quam ac ultricies sagittis, libero nisi gravida sem, in convallis sem ante nec purus. Suspendisse in tellus vitae purus porttitor pharetra. Curabitur in
ipsum. Fusce lobortis, ligula eu facilisis semper, arcu ipsum ornare lorem, ultricies tempor diam arcu vitae est. Aliquam non sapien. Phasellus quam. Praesent eu ligula id mauris tincidunt hendrerit. Fusce nec enim. Nam posuere. Morbi at ipsum vitae
diam tempus mollis. Pellentesque sollicitudin condimentum neque. Sed auctor consequat lorem. Donec quis lacus fringilla augue venenatis vulputate. Duis lobortis consectetur libero. Aliquam erat volutpat. Etiam interdum bibendum purus. Vivamus id tellus
et tellus dictum molestie. Nam sit amet arcu dictum mauris rhoncus tristique. Nunc rhoncus porta velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer tempor diam eu leo. Praesent leo. Morbi blandit,
nulla non rhoncus dapibus, metus tellus posuere justo, et condimentum leo ante cursus libero. Vestibulum eu magna a metus pellentesque molestie. Nulla elementum iaculis velit. Nullam sit amet velit et sapien interdum accumsan. Vestibulum dapibus lectus
quis orci. Mauris gravida sodales velit. Maecenas sollicitudin malesuada lacus. Morbi sollicitudin augue vel elit. Duis ipsum felis, fermentum id, iaculis id, fermentum et, velit. Ut ultricies. In nibh orci, euismod venenatis, vulputate ut, pharetra
in, purus. Nam condimentum leo in nunc. Donec ut nisi vitae ante viverra imperdiet. Suspendisse in neque eu metus fermentum malesuada. Aliquam erat volutpat. Aenean nibh sem, varius vitae, facilisis sed, venenatis faucibus, neque. Quisque odio. Cras
eget enim. Suspendisse potenti. Donec mattis, felis vel dignissim mattis, mi enim feugiat ligula, eget imperdiet eros nibh non risus. Nullam fermentum eros et eros. Mauris facilisis est ac velit. Nunc ipsum odio, pharetra ac, posuere et, adipiscing
at, lacus. Nunc malesuada velit at quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer ipsum felis, placerat id, rutrum sed, molestie ornare, leo. Nam fermentum luctus leo. Curabitur in ipsum.
Maecenas non lectus a quam porta consequat. Fusce molestie egestas ligula. Cras nisl risus, tempus ac, tincidunt eu, gravida sit amet, eros. Duis nec lacus sed ipsum scelerisque tempus. Phasellus sapien nunc, lacinia sit amet, vulputate vel, tincidunt
nec, eros. Praesent quis ligula. Nulla facilisi. Nullam fermentum bibendum elit. Vivamus feugiat lacus. Mauris tempus. Vivamus lorem. Quisque blandit odio non mi. Etiam tempus, enim in dictum commodo, ante augue cursus sapien, non vehicula dolor lacus
sed mi. Etiam enim lectus, dictum eget, scelerisque eget, luctus quis, velit. Maecenas semper vulputate nisi. Duis fringilla. Etiam iaculis nisl a ipsum. Nunc varius dolor id nisi. Curabitur sit amet velit auctor arcu ullamcorper luctus. </div>
</div>
答案 0 :(得分：1)
我建议使用 flexbox 容器。
使用flexbox，您只需三种不同的样式即可横向和纵向集中元素：
除了使用明显减少的CSS规则外，会自动确保子元素不会溢出。
然后你只需要在子元素上设置一个 width 来展示水平居中。
这可以在以下内容中看到：
.a {
display: flex;
align-items: center;
justify-content: center;
}
.b {
width: 200px;
}<div class="a">
<div class="b">dui ut erat. Phasellus nibh magna, tempor vitae, dictum sed, vehicula sed, mauris. In enim arcu, porta vel, dictum eu, pretium a, ipsum. Donec cursus, lorem ac posuere viverra, sem tellus accumsan dolor, vel accumsan tortor est et est. Praesent molestie.
Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla. Nullam vel ante et nunc accumsan viverra. Vestibulum nulla justo, tristique nec, tincidunt eget, ultricies sollicitudin,
nulla. Proin dui ante, consectetur a, tincidunt in, mattis ut, ipsum. Sed tristique. Mauris et sapien. Quisque risus. Ut laoreet hendrerit mi. Nam vestibulum viverra diam. Nullam eros ipsum, rutrum ut, ultricies sed, congue sed, est. Pellentesque
porttitor. Donec dictum urna eu mi. Maecenas in lorem. Vestibulum in ipsum. Praesent ac nunc. Donec vitae lectus. Etiam commodo velit ut mi. Duis egestas, quam faucibus interdum tincidunt, enim sem tincidunt tellus, sed condimentum tellus tortor u
mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam ollicitudin, nisi egestas scelerisque
pretium, odio enim sodales metus, venenatis vulputate arcu quam eget purus. Fusce convallis mattis nunc. Fusce non nunc. Maecenas nec tellus a mi ornare auctor. Proin magna nunc, congue ut, dapibus eu, placerat vitae, erat. Nam egestas pretium mauris.
Cras posuere, est nec egestas scelerisque, tellus justo scelerisque nisi, at consequat ante dolor eget diam. Phasellus pharetra, lectus vel molestie tincidunt, orci tellus dapibus odio, vel semper lacus tortor vitae metus.Vestibulum accumsan enim
nec ipsum. Nunc cursus sapien. Etiam fermentum luctus arcu. condimentum neque molestie tincidunt. Fusce egestas, est ut fringilla facilisis, quam purus blandit dui, eget egestas mauris nibh ut diam. Phasellus volutpat. Sed fringilla tellus in sem.
Curabitur dignissim nunc id arcu. Nulla facilisi. In imperdiet. Aliquam enim. Nullam hendrerit purus. Suspendisse lectus orci, commodo eget, luctus ac, venenatis id, magna. In hac habitasse platea dictumst. Fusce aliquam. Donec ut nisi ac diam posuere
imperdiet. Cras est enim, consequat non, pretium at, molestie quis, sapien. Suspendisse porta, quam ac ultricies sagittis, libero nisi gravida sem, in convallis sem ante nec purus. Suspendisse in tellus vitae purus porttitor pharetra. Curabitur in
ipsum. Fusce lobortis, ligula eu facilisis semper, arcu ipsum ornare lorem, ultricies tempor diam arcu vitae est. Aliquam non sapien. Phasellus quam. Praesent eu ligula id mauris tincidunt hendrerit. Fusce nec enim. Nam posuere. Morbi at ipsum vitae
diam tempus mollis. Pellentesque sollicitudin condimentum neque. Sed auctor consequat lorem. Donec quis lacus fringilla augue venenatis vulputate. Duis lobortis consectetur libero. Aliquam erat volutpat. Etiam interdum bibendum purus. Vivamus id tellus
et tellus dictum molestie. Nam sit amet arcu dictum mauris rhoncus tristique. Nunc rhoncus porta velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer tempor diam eu leo. Praesent leo. Morbi blandit,
nulla non rhoncus dapibus, metus tellus posuere justo, et condimentum leo ante cursus libero. Vestibulum eu magna a metus pellentesque molestie. Nulla elementum iaculis velit. Nullam sit amet velit et sapien interdum accumsan. Vestibulum dapibus lectus
quis orci. Mauris gravida sodales velit. Maecenas sollicitudin malesuada lacus. Morbi sollicitudin augue vel elit. Duis ipsum felis, fermentum id, iaculis id, fermentum et, velit. Ut ultricies. In nibh orci, euismod venenatis, vulputate ut, pharetra
in, purus. Nam condimentum leo in nunc. Donec ut nisi vitae ante viverra imperdiet. Suspendisse in neque eu metus fermentum malesuada. Aliquam erat volutpat. Aenean nibh sem, varius vitae, facilisis sed, venenatis faucibus, neque. Quisque odio. Cras
eget enim. Suspendisse potenti. Donec mattis, felis vel dignissim mattis, mi enim feugiat ligula, eget imperdiet eros nibh non risus. Nullam fermentum eros et eros. Mauris facilisis est ac velit. Nunc ipsum odio, pharetra ac, posuere et, adipiscing
at, lacus. Nunc malesuada velit at quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer ipsum felis, placerat id, rutrum sed, molestie ornare, leo. Nam fermentum luctus leo. Curabitur in ipsum.
Maecenas non lectus a quam porta consequat. Fusce molestie egestas ligula. Cras nisl risus, tempus ac, tincidunt eu, gravida sit amet, eros. Duis nec lacus sed ipsum scelerisque tempus. Phasellus sapien nunc, lacinia sit amet, vulputate vel, tincidunt
nec, eros. Praesent quis ligula. Nulla facilisi. Nullam fermentum bibendum elit. Vivamus feugiat lacus. Mauris tempus. Vivamus lorem. Quisque blandit odio non mi. Etiam tempus, enim in dictum commodo, ante augue cursus sapien, non vehicula dolor lacus
sed mi. Etiam enim lectus, dictum eget, scelerisque eget, luctus quis, velit. Maecenas semper vulputate nisi. Duis fringilla. Etiam iaculis nisl a ipsum. Nunc varius dolor id nisi. Curabitur sit amet velit auctor arcu ullamcorper luctus. </div>
</div>
希望这有帮助！ ：）
答案 1 :(得分：1)
您可以添加max-height: 100%;，它可以在下面的代码段中使用。您可能还需要向祖先元素添加height设置，如果没有固定的高度，请将它们100％一直提升到body和html。
.b {
padding: 0;
position: absolute;
margin: 0;
width: 100%;
max-width: 500px;
max-height: 100%;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}<div class="a">
<div class="b">dui ut erat. Phasellus nibh magna, tempor vitae, dictum sed, vehicula sed, mauris. In enim arcu, porta vel, dictum eu, pretium a, ipsum. Donec cursus, lorem ac posuere viverra, sem tellus accumsan dolor, vel accumsan tortor est et est. Praesent molestie.
Nunc Venenatis Sapien Ultrices Dui. Vivamus dolor. Integer vel ante. Proin felis. Maecenas non nisl eu mi hendrerit fringilla. Nullam vel ante et nunc accumsan viverra. Vestibulum nulla justo, tristique nec, tincidunt eget, ultricies sollicitudin,
nulla. Proin dui ante, consectetur a, tincidunt in, mattis ut, ipsum. Sed tristique. Mauris et sapien. Quisque risus. Ut laoreet hendrerit mi. Nam vestibulum viverra diam. Nullam eros ipsum, rutrum ut, ultricies sed, congue sed, est. Pellentesque
porttitor. Donec dictum urna eu mi. Maecenas in lorem. Vestibulum in ipsum. Praesent ac nunc. Donec vitae lectus. Etiam commodo velit ut mi. Duis egestas, quam faucibus interdum tincidunt, enim sem tincidunt tellus, sed condimentum tellus tortor u
mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam ollicitudin, nisi egestas scelerisque
pretium, odio enim sodales metus, venenatis vulputate arcu quam eget purus. Fusce convallis mattis nunc. Fusce non nunc. Maecenas nec tellus a mi ornare auctor. Proin magna nunc, congue ut, dapibus eu, placerat vitae, erat. Nam egestas pretium mauris.
Cras posuere, est nec egestas scelerisque, tellus justo scelerisque nisi, at consequat ante dolor eget diam. Phasellus pharetra, lectus vel molestie tincidunt, orci tellus dapibus odio, vel semper lacus tortor vitae metus.Vestibulum accumsan enim
nec ipsum. Nunc cursus sapien. Etiam fermentum luctus arcu. condimentum neque molestie tincidunt. Fusce egestas, est ut fringilla facilisis, quam purus blandit dui, eget egestas mauris nibh ut diam. Phasellus volutpat. Sed fringilla tellus in sem.
Curabitur dignissim nunc id arcu. Nulla facilisi. In imperdiet. Aliquam enim. Nullam hendrerit purus. Suspendisse lectus orci, commodo eget, luctus ac, venenatis id, magna. In hac habitasse platea dictumst. Fusce aliquam. Donec ut nisi ac diam posuere
imperdiet. Cras est enim, consequat non, pretium at, molestie quis, sapien. Suspendisse porta, quam ac ultricies sagittis, libero nisi gravida sem, in convallis sem ante nec purus. Suspendisse in tellus vitae purus porttitor pharetra. Curabitur in
ipsum. Fusce lobortis, ligula eu facilisis semper, arcu ipsum ornare lorem, ultricies tempor diam arcu vitae est. Aliquam non sapien. Phasellus quam. Praesent eu ligula id mauris tincidunt hendrerit. Fusce nec enim. Nam posuere. Morbi at ipsum vitae
diam tempus mollis. Pellentesque sollicitudin condimentum neque. Sed auctor consequat lorem. Donec quis lacus fringilla augue venenatis vulputate. Duis lobortis consectetur libero. Aliquam erat volutpat. Etiam interdum bibendum purus. Vivamus id tellus
et tellus dictum molestie. Nam sit amet arcu dictum mauris rhoncus tristique. Nunc rhoncus porta velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer tempor diam eu leo. Praesent leo. Morbi blandit,
nulla non rhoncus dapibus, metus tellus posuere justo, et condimentum leo ante cursus libero. Vestibulum eu magna a metus pellentesque molestie. Nulla elementum iaculis velit. Nullam sit amet velit et sapien interdum accumsan. Vestibulum dapibus lectus
quis orci. Mauris gravida sodales velit. Maecenas sollicitudin malesuada lacus. Morbi sollicitudin augue vel elit. Duis ipsum felis, fermentum id, iaculis id, fermentum et, velit. Ut ultricies. In nibh orci, euismod venenatis, vulputate ut, pharetra
in, purus. Nam condimentum leo in nunc. Donec ut nisi vitae ante viverra imperdiet. Suspendisse in neque eu metus fermentum malesuada. Aliquam erat volutpat. Aenean nibh sem, varius vitae, facilisis sed, venenatis faucibus, neque. Quisque odio. Cras
eget enim. Suspendisse potenti. Donec mattis, felis vel dignissim mattis, mi enim feugiat ligula, eget imperdiet eros nibh non risus. Nullam fermentum eros et eros. Mauris facilisis est ac velit. Nunc ipsum odio, pharetra ac, posuere et, adipiscing
at, lacus. Nunc malesuada velit at quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer ipsum felis, placerat id, rutrum sed, molestie ornare, leo. Nam fermentum luctus leo. Curabitur in ipsum.
Maecenas non lectus a quam porta consequat. Fusce molestie egestas ligula. Cras nisl risus, tempus ac, tincidunt eu, gravida sit amet, eros. Duis nec lacus sed ipsum scelerisque tempus. Phasellus sapien nunc, lacinia sit amet, vulputate vel, tincidunt
nec, eros. Praesent quis ligula. Nulla facilisi. Nullam fermentum bibendum elit. Vivamus feugiat lacus. Mauris tempus. Vivamus lorem. Quisque blandit odio non mi. Etiam tempus, enim in dictum commodo, ante augue cursus sapien, non vehicula dolor lacus
sed mi. Etiam enim lectus, dictum eget, scelerisque eget, luctus quis, velit. Maecenas semper vulputate nisi. Duis fringilla. Etiam iaculis nisl a ipsum. Nunc varius dolor id nisi. Curabitur sit amet velit auctor arcu ullamcorper luctus. </div>
</div>
答案 2 :(得分：0)
当你将y转换了-50％时，你的div超过了页面高度。
试试这个：
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);