在寫佈局的時候我們常常會遇到要實現水平垂直居中，以下我簡要的總結以下：
水平方向居中
先來個總結的思維導圖
1.)是不是行級元素(像text link 等)
可以通過在父元素設置text-align:center來弄成水平居中。
這種辦法對inline,inline-block,inline-table等元素都有效果.
2.)是不是塊級元素
可以通過margin-left:auto和margin-right:auto來實現居中效果，這要求必須有寬度(要不然變成佔整個行的寬度了).
代碼和效果如下：
3.)是否是多餘1個的塊級元素
如果想要使2個或多個的塊級元素變成水平居中有一下兩個方法
- 變成inline-block元素，然後通過text-align的方式去實現
- 通過flex佈局的justify-content來實現
- 如果是垂直排列可以通過margin:0 auto 來實現
<main class="inline-block-center">
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
</main>
<main class="flex-center">
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
</main>
body {
background: #f06d06;
font-size: 80%;
}
main {
background: white;
margin: 20px 0;
padding: 10px;
}
main div {
background: black;
color: white;
padding: 15px;
max-width: 125px;
margin: 5px;
}
.inline-block-center {
text-align: center;
}
.inline-block-center div {
display: inline-block;
text-align: left;
}
.flex-center {
display: flex;
justify-content: center;
}
效果如下：
如果塊級元素是垂直襬放的，也可以通過margin:0 auto來實現.
<main>
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
</main>
body {
background: #f06d06;
font-size: 80%;
}
main {
background: white;
margin: 20px 0;
padding: 10px;
}
main div {
background: black;
margin: 0 auto;
color: white;
padding: 15px;
margin: 5px auto;
}
main div:nth-child(1) {
width: 200px;
}
main div:nth-child(2) {
width: 400px;
}
main div:nth-child(3) {
width: 125px;
}
效果如下：
垂直方向上居中
1.)是行內元素嗎？
1.1)是單行元素嗎？
有時候可以通過調整padding來實現垂直居中，我們可以設置padding-top,padding-bottom一樣來實現垂直方向的居中
<main>
<a href="#0">We're</a>
<a href="#0">Centered</a>
<a href="#0">Bits of</a>
<a href="#0">Text</a>
</main>
body {
background: #f06d06;
font-size: 80%;
}
main {
background: white;
margin: 20px 0;
padding: 50px;
}
main a {
background: black;
color: white;
padding: 40px 30px;
text-decoration: none;
}
效果如下：
如果padding不是一個選項的話，並且你知道不是換行的話，可以通過line-height來實現，當line-height 和 height一樣高的時候，顯得垂直居中。
<main>
<div>
I'm a centered line.
</div>
</main>
body {
background: #f06d06;
font-size: 80%;
}
main {
background: white;
margin: 20px 0;
padding: 40px;
}
main div {
background: black;
color: white;
height: 100px;
line-height: 100px;
padding: 20px;
width: 50%;
white-space: nowrap;
}
效果如下：
1.2)是不是多行？
<div class="flex-center">
<p>I'm vertically centered multiple lines of text in a flexbox container.</p>
</div>
body {
background: #f06d06;
font-size: 80%;
}
div {
background: white;
width: 240px;
margin: 20px;
}
.flex-center {
background: black;
color: white;
border: 10px solid white;
display: flex;
flex-direction: column;
justify-content: center;
height: 200px;
resize: vertical;
overflow: auto;
}
.flex-center p {
margin: 0;
padding: 20px;
}
效果如下；
2.)是不是塊級元素
2.1)是否知道高度
如果知道高度，可以首先通過top:50%來實現子元素上邊距相對於父元素的50%，然後再通過margin-top:-50px(也就是子元素高度的一半)來實現子元素的垂直居中。
2.2)是否不知道高度
不知道具體高度的情況下，可以通過transform:translatey(-50%)來實現垂直方向的移動自己本身元素的一半高度.
2.3)能否可以使用flexbox
水平垂直居中
1.）不知道水平垂直居中的元素的寬度，高度
看以下一個例子：
<body>
<div id="container">
<div id="box">
和我哦好煩阿里發貨咖啡阿卡交話費哈佛好可憐發
</div>
</div>
</body>
/* 通過transform來實現,當不知道寬度的時候 */
#container{
width: 400px;
height: 400px;
border: 1px solid red;
position: relative;
}
#box{
width: 100px;
border: 1px solid red;
position: absolute;
top:50%;
left: 50%;
transform: translate(-50%,-50%);
}
上面方法的關鍵是transform，因爲我們不知道我們所要水平垂直居中的元素的大小，因此只能通過百分比來.
2.知道水平垂直居中元素的具體寬度和高度
<div id="container">
<div id="box">
</div>
</div>
/* 通過margin來實現 */
/* #container{
width: 400px;
height: 400px;
border: 1px solid red;
position: relative;
}
#box{
width: 100px;
height: 100px;
border: 1px solid red;
position: absolute;
top:50%;
left: 50%;
margin: -50px 0 0 -50px;
} */
因爲知道所要設置的元素的寬度和高度，因此可以通過使margin移動所寬度和高度的一半大小來實現.
3.可不可以使用flex-box
<div id="container">
<div id="box">
</div>
</div>
#container{
width: 400px;
height: 400px;
border: 1px solid red;
display: flex;
justify-content: center;
align-items: center;
}
#box{
width: 100px;
height: 100px;
border: 1px solid red;
}
可以通過設置justify-content,align-items來實現我們的目標.
參考：點擊鏈接