非绝对定位元素
方法一
利用flex布局,IE浏览器兼容性不好。
//HTML
<div class="father">
<div class="son">
哈哈
</div>
</div>
//css
.father {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
background-color: blue;
}
.son {
background-color: red;
}
得到的结果如下图所示:
绝对定位元素
参见我的另一篇博文:如何实现绝对定位元素的水平和垂直居中