今天碰到了一个问题，给一个父容器和一个子元素，子元素不定高和不定宽，怎么让子元素居中在父容器中，比如下段代码
方法1:
<div class="div1"> <div class="div2"> <p>this is a test!</p> </div> </div>
保证div2居中在div1中，想了下，CSS代码如下
*{ margin: 0;padding: 0; } .div1{ padding:20px 100px; margin: 20px; height: 600px; width: 500px; text-align: center; border: 1px solid #ccc; } .div1:before{ content: "."; height: 100%; display: inline-block; vertical-align: middle; visibility: hidden; } .div2{ border: 1px solid gray; display: inline-block; vertical-align: middle; }
可以利用 vertical-align:middle属性保证垂直居中，和父容器的text-align:center来保存水平居中，前面一个属性只能对display:inline-block有效，而且需要参照物，所以用
:before伪元素来实现。
方法2:
<div class="div1"> <div class="content"> <img src="" alt=""> </div> </div>
实现上面的图片内容居中，可以用父容器的line-height来实现
.div1{ margin:20px; line-height:500px; text-align:center; } .content{ display:inline-block; vertical-align:middle; line-height:normal; } .content img{ max-width:100px; }
上面的方法也可以实现不定高宽的内容居中，而且里面还可以加别的元素。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。