css實現水平居中垂直居中的幾種方式
- 常用居中方式
- 水平居中
a:行內元素：text-align:center；
程式碼：
<input type="text" value="這是一個行內元素" style="text-align: center"/>
效果圖：
已知寬度的塊級元素：
b:使用margin+auto來實現水平居中
實現原理：margin: 0 auto：上下邊界為0，左右根據寬度自適應。
為什麼margin：0 auto可以水平居中？
根據盒子模型來說：我們假設margin-left和 margin-right的寬度為（x），就有margin-left(x) + border-left-width(0) + padding-left-width(0) +width(我們假設為300px) + padding-right-width(0) + border-left-width(0) +margin-right(x) = contain width(假設為800px)，我們可以得到左右margin寬度為250，塊級元素剛好水平居中。
css程式碼：
<style>
.box {
width: 300px;
height: 300px;
margin: 0 auto;
background-color: aqua;
}
</style>
Html程式碼：
<div class="box">
</div>
效果圖：
注意的地方：需要設定width寬度，否則無效；
並且只對block元素有效；
C：絕對定位和margin-left: -(寬度值/2)實現水平居中
Css程式碼：
.box {
width: 300px;
height: 300px;
position: absolute;
left: 50%;
margin-left: -150px;//為元素寬度的一半
background-color: plum;
}
效果圖：
D：position:absolute + （left=0+top=0+right=0+bottom=0） + margin:auto
Css程式碼：
.box {
width: 300px;
/*height: 300px;*/
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: palegreen;
}
效果圖：
未知寬度的塊級元素：
A：table標籤配合margin左右auto實現水平居中
B：inline-block實現水平居中方法
C：絕對定位實現水平居中
Css程式碼：
.box{
position: absolute;
left: 50%;
transform: translateX(-50%); /* 移動元素本身50% */
background: aqua;
}
Html程式碼：
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
效果圖：
D：CSS3的flex實現水平居中方法
Css程式碼：
.parent{
display: flex;
}
.son{
margin: auto;
}
E：CSS3的fit-content配合左右margin為auto實現水平居中方法
Css程式碼：
.son{
width: fit-content;
margin-left: auto;
margin-right: auto;
background-color: #DF654A;
}
程式碼效果圖：
- 垂直居中
A：使用絕對定位和負外邊距對塊級元素進行垂直居中
Css程式碼：
#box {
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
#child {
width: 150px;
height: 100px;
background: plum;
position: absolute;
top: 50%;
margin: -50px 0 0 0;
line-height: 100px;
}
Html程式碼：
<div id="box">
<div id="child">要被垂直居中的元素</div>
</div>
效果圖：
B：使用絕對定位和transform
Css程式碼：
#box {
width: 300px;
height: 300px;
background: #ddd;
position: relative;
}
#child {
background: plum;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
程式碼結果圖：
注：不需要了解元素的寬度，因為transform中translate偏移的百分比就是相對於元素自身的尺寸而言的。
C:另外一種使用絕對定位和負外邊距進行垂直居中的方式
只需要將children改變一下：
Css程式碼：
#child {
width: 50%;
height: 30%;
background: pink;
position: absolute;
top: 50%;
margin: -15% 0 0 0;
}
效果圖：
D：絕對定位+margin:auto來實現垂直居中
Css程式碼：
#child {
width: 200px;
height: 100px;
background:plum;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
line-height: 100px;
}
程式碼效果圖：
注：
這種實現方式的兩個核心是：把要垂直居中的元素相對於父元素絕對定位，top和bottom設為相等的值，我這裡設成了0，當然你也可以設為99999px或者-99999px無論什麼，只要兩者相等就行，這一步做完之後再將要居中元素的margin設為auto，這樣便可以實現垂直居中了。
被居中元素的寬高也可以不設定，但不設定的話就必須是圖片這種自身就包含尺寸的元素，否則無法實現。
E：使用padding實現子元素的垂直居中
Css程式碼：
#box {
width: 300px;
padding: 100px 0;
background: #ddd;
}
#child {
width: 200px;
height: 100px;
background:purple;
line-height: 50px;
}
效果圖：
注：給父元素設定相等的上下內邊距，則子元素自然是垂直居中的，當然這時候父元素是不能設定高度的，要讓它自動被填充起來，除非設定了一個正好等於上內邊距+子元素高度+下內邊距的值，否則無法精確的垂直居中。
F：使用flex佈局
Css程式碼：
#child {
width: 200px;
height: 200px;
background:purple;
display: flex;
align-items: center;
}
效果圖：
G：使用 line-height 和 vertical-align 對圖片進行垂直居中
Css程式碼：
#child {
width: 200px;
height: 200px;
background:paleturquoise;
line-height: 200px;
}
#children img{
vertical-align: middle;
}
H： 使用 display 和 vertical-align 對容器裡的文字進行垂直居中
#box{
width: 300px;
height: 300px;
background: brown;
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
程式碼效果：
<input type="text" value="這是一個行內元素" style="text-align: center"/>
<input type="text" value="這是一個行內元素" style="text-align: center"/>