CSS元素水平垂直居中的方法
阿新 • • 發佈：2018-04-17
垂直 .com put ron spa blank span osi 絕對定位
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
CSS元素水平垂直居中的方法