居中一直是css里比較關鍵的一個概念齐媒，在多數(shù)情況下居中往往有許多種方法妓肢。
水平居中
行內(nèi)元素居中： text-align：center;
塊級元素居中：
-
margin：0 auto吼鱼；//這種方法前提必須是要為元素設置寬度，否則寬度拉伸為父級的寬度劲藐，無法實現(xiàn)居中效果告希。 - 利用絕對定位的“子絕父相”法，給父元素設置相對定位引矩，子元素設置絕對定位和transform：
.container {
position:relative;
}
.item {
position:absolute;
left:50%;
transform:translate(-50%);
}
- 利用flex實現(xiàn)居中:
這里列舉一種常見的方式梁丘，具體請參考上篇文章： CSS中的布局詳解（三）
.container {
display:flex;
justify-content:center;
}
垂直居中
行內(nèi)元素垂直居中：
- 單行行內(nèi)或文本元素，可以設置等值的padding的top值和bottom值：
padding-top:10px;
padding-bottom:10px;
- 還有最常用的旺韭，讓行高line-height和height值相等：
height:50px;
line-height:50px;
- vertical-align屬性氛谜，但這個屬性需要設置一個類似table-cell的父級容器：
display: table-cell;
vertical-align: middle;
塊級元素：
- 在已知元素高度的情況下，可以利用定位來實現(xiàn)居中：
.container {
position:relative;
}
.item {
position: absolute;
top: 50%;
height:100px;
margin-top: -50px;
}
- 在未知元素高度的情況下区端，首先需要定位到容器的中心值漫，然后再使用transform和translate屬性：
.container {
position:relative;
}
.item {
position: absolute;
top:50%;
transform: translateY(-50%);
}
- 利用flex實現(xiàn)垂直居中：
.container {
display:flex;
flex-direction: column;
justify-content: center;
align-items: center; //加上這條屬性，就是水平和垂直居中
}
參考資料：
我的個人博客：http://chronosblog.top
我的微信公眾號：runtustory
CSS布局詳解系列索引：
