實現元素的水平和垂直居中方法總結

非絕對定位元素

方法一

利用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;
}

得到的結果如下圖所示：

絕對定位元素

參見我的另一篇博文：如何實現絕對定位元素的水平和垂直居中