html布局
<div class="parent"> <div class="child">hello world</div> </div>
1、使用css3 flex弹性布局
.parent{ display: flex; justify-content: center; align-items: center; }
2、使用CSS3 transform，子元素绝对定位
.parent{ position: relative; } .parent .child{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
3、利用table-cell
.parent{ display: table; height:300px; width: 300px; } .parent .child{ display: table-cell; vertical-align: middle; text-align: center; }
4、使用一个空标签， 设置成 display: inline-block;vertical-align:middle;width:0
.parent{ height:300px; width: 300px; text-align: center; background: #FD0C70; } .parent span{ display: inline-block; width: 0; height: 100%; vertical-align: middle; zoom: 1;/*BFC*/ *display: inline; } .parent .child{ display: inline-block; color: #fff; zoom: 1;/*BFC*/ *display: inline; }
<div class="parent">
<span></span>
<div class="child">hello world-2</div>
</div>
以上方法在ie9以下都有兼容性问题，根据实际情况使用
原文：https://www.cnblogs.com/xiao-ling-zi/p/10871368.html