水平居中
inline元素用text-align:center
block元素用margin:0 auto;
垂直居中
Flex彈性盒子
Flex彈性盒子應(yīng)該是解決垂直居中的最佳方案
main{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
給需要垂直居中的元素的父容器設(shè)置display:flex堰汉，并指定align-items: center
另外justify-content和flex-direction用于調(diào)整這兩個子元素水平居中的排列順序显拜。
absolute絕對定位
思路：設(shè)成absolute后，指定top和left為50%矮固，將元素的左上角定位點放到頁面正中心譬淳。然后用負(fù)值margin一半的元素寬高度將元素拉回頁面正中心
main{
position: absolute;
width: 18em;
height: 10em;
top: 50%;
left: 50%;
margin-top: -9em;
margin-left: -5em;
}
缺點：
缺點是你需要事先指定元素的width和height，否則無法給負(fù)margin設(shè)值邻梆，顯得不夠靈活。其實不必固定元素的寬高尼摹，改用translate()位移來替代負(fù)margin，實現(xiàn)將元素拉回頁面正中心蠢涝。
main{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
用絕對定位absolute讓需要垂直居中的元素脫離文檔流，指定top和left各50%將元素左上角定位點設(shè)到頁面正中心徘铝。然后用translate()各負(fù)50%，將元素拉回頁面正中心惕它。思路和負(fù)margin是一致的废登，優(yōu)勢是不必固定元素的寬高了。缺點是absolute絕對定位威力太大钳宪，要考慮是否會對頁面布局造成影響。
line-height
元素內(nèi)容是單行搔体，并且其高度是固定不變的半醉，你只要將其“l(fā)ine-height”設(shè)置成和“height”值一樣就Ok了。
<div class="vertical">content</div>
.vertical {
height: 100px;
line-height: 100px;/*值等于元素高度的值*/
}
優(yōu)點：
適合在所有瀏覽器缩多，沒有足夠空間時，內(nèi)容不會被切掉
缺點：
僅適合應(yīng)用在文本和圖片上梁钾，并且這種方法逊抡，當(dāng)你文本不是單行時，效果極差冒嫡，差到讓你感到惡心。
這種方法對運用在小元素上是非常有用的方咆，比如說讓一個button蟀架、圖片或者單行文本字段榆骚。
