CSS元素水平垂直居中的方法

1.  元素水平居中

1.1  設置父元素的屬性

text-align: center;

說明：此屬性只針對父元素的子元素為內聯元素時有效，比如：img，input，select，button等（行內元素，但表現上屬於內聯元素，可以設置寬度和高度），span需要將display屬性設置為內聯，並設置寬度和高度。

參考：MDN內聯元素

1.2  設置元素自身邊距屬性

margin: 0 auto;
display: block;

說明：元素必須設置為塊元素，通過margin屬性自動分配左右邊距達到居中效果

1.3  設置元素定位屬性

position: relative; //父元素設置相對定位

position: absolute; //子元素設置絕對定位，並向左移動元素自身一半的長度
width:50px;
height: 50px;
left: 50%;
transform: translateX(-50%);

2.  元素垂直居中

2.1   設置元素定位屬性，類似1.3

position: relative; //父元素設置相對定位

position: absolute; //子元素設置絕對定位，並向左移動元素自身一半的長度
width:50px;
height: 50px;
top: 50%;
transform: translateY(-50%);

2.2  通過table特性設置元素

display: table-cell;
vertical-align: middle;

說明：把內聯或者行內元素偽裝成單元格子元素，通過table標簽的特性處理單元格，此方法對低版本的IE6/7不相容

3.  元素水平垂直居中

3.1  設置元素定位屬性，類似1.3

position: relative; //父元素設置相對定位

position: absolute; //子元素設置絕對定位，並向左向上移動元素自身一半的長度
width:50px;
height: 50px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

3.2  根據元素的自動定位屬性

position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width:50px;
height: 50px;

說明：此方法跟3.1類似，只是自動計算所有的margin值，以到達上下左右居中效果。

參考：https://www.cnblogs.com/zjjDaily/p/5952723.html