Question

如何让一个块级元素水平垂直居中

Answer 1

div实现水平居中只需要设置固定宽度和margin:0 auto即可， 给你2个解决方案: 1、条件是div的高度和宽度是固定的 <style type="text/css"> <!-- div1 { position:relative; width:600px; height:500px; border:1px solid #008800; } div2 { position:absolute; top:50%; left:50%; margin:-150px 0 0 -200px; width:400px; height:300px; border:1px solid #008800; }--> </style> <div class="div1"> <div class="div2">让层垂直居中</div> </div> 其实解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。 如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于父级层的样式编写。 2、条件是div的高度和宽度是不固定的 如果div宽度不固定，那用div就有点困难了，虽然用js获取当前高宽再附加css可以解决，但是要用到js来解决问题就有点逊了； 我给你一个思路，你不妨试试table布局，table不设置宽度的情况下默认是宽度和高度都是最小化的，这样给table设置margin:0 auto就可以让这个table水平方向居中； 解决了水平居中，那就来解决垂直居中，td中的内容默认是垂直居中的，那么只要两者互相嵌套一下不就解决水平垂直居中了! 但是有一个问题，你所需要垂直居中的父级table的高度是否固定，如果父级高度固定，那么子级高度不固定也一样可以垂直居中