<div class="parent"> <div class="child"> </div> </div>
一,display:table-cell布局
.parent { display: table-cell; vertical-align: middle; text-align: center; } .child { display: inline-block; }
二,display:flex;只需设置父类,但兼容性有问题flex
.parent { display: flex; justify-content: center; align-items: center; }
三,absolute+transform,绝对定位脱离文档流,不会对后续元素的布局形成影响。但若是绝对定位元素是惟一的元素则父元素也会失去高度。transform 为 CSS3 属性,有兼容性问题 。code
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }