CSS完全可以居中任何你想居中的東西。
水平
-
內聯元素(inline-* elements or inline) 例如文字，鏈接等 ：
可以通過text-align屬性直接將內聯元素水平居中。
.center-children {
text-align: center;
}
-
塊級元素 :
塊級元素才有盒子模型，所以我們考慮控制元素的<b>margin-left</b>和<b>margin-right</b>來使元素水平居中。
.center-me {
margin: 0 auto;
}
-
多個塊級元素 :
如果你想在一行里居中多個塊級元素，有兩種方案:
- 設置為inline-block，然后父級元素直接設置<b>text-align</b>屬性。
/*html:*/
<div class="big_box">
<div></div>
<div></div>
</div>
/*css:*/
.big_box {
text-align:center;
}
.big_box div {
display:inline-block;
text-align:left;
}
- 用flex布局來實現。
/*css*/
.big_box {
display:flex;
justify-content: center;
}
Paste_Image.png
垂直
垂直居中比較棘手
- 內聯元素
- 元素只有一行，那么可以通過設置<b>padding-top</b>和<b>padding-bottom</b>相等，那么文本就居中啦。
但有時候不能設置padding，那么可以通過<b>line-height</b>來使單行元素看起來垂直居中，但這只是看起來，只有單行時可以使用。 - 多行的情況下，還是通過相等的垂直方向的padding，但如果設置了以后效果不佳的話，可以通過將元素以table的形式顯示，table中的td默認是垂直居中的。(比較out的做法)
.center-table {
display: table;
height: 250px;
background: white;
width: 240px;
margin:20px;
}
.center-table p {
display: table-cell;
margin:0;
background: black;
color:white;
padding:20px;
border: 10px solid white;
vertical-align: middle;
}
Paste_Image.png
比較新潮一點的做法是用flexbox
一個flex元素可以很容易地在flex父級元素中垂直居中：
.flex-center-vertically {
display: flex;
justify-content:center;
flex-direction: column;
height:400px;
}
如果父容器有一個固定的高（就是不隨著內容的大小變化，是固定的px或者%）那么我們可以用幽靈元素ghost element技術。
在父元素中設置一個全高（100%）的偽元素，而我們要居中的元素以它為基準。
.ghost-center::before {
content: " ";
display: inline-block;
height: 100%;
width: 1%；
vertical-align: middle;
}
.ghost-center p {
display: inline-block;
vertical-align:middle;
width: 190px;
margin: 0;
padding: 20px;
background: black;
}
- 塊級元素
- 固定高度的元素：
當高度確定時，我們可以用以下方式來垂直居中它：
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height:100px;
margin-top:-50px;
}
- 如果不是固定高度的：
那么就通過
.parent {
position: relative;
}
.child {
position: relative;
top:50%;
transform: translateY(-50%);
}
和上面一樣，還有個更簡單，更新潮的方法，就是使用flexbox
.parent {
display: flex;
flex-direction: column;
justify-content: center;
}
水平與垂直
可以手動組合上面的方法，但綜合來說用以下方案。
- 確定高度和寬度
一個兼容性比較好的解決方案是：
.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
- 高度和寬度不確定
倘若不確定高度和寬度，那么我們就用<b>transform</b>屬性，和一個負50%的translate 。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
對，沒錯，用flexbox肯定更簡單，誰讓它就是用來解決布局問題的呢。
.parent {
display: flex;
justify-content: center;
align-items: center;
}
