[點擊打開視頻講解更加詳細](【面試題】CSS五種最常用水平垂直居中的方法_哔哩哔哩_bilibili)
一、使用 margin:auto當元素有給定的高度以及寬度的時候，使用 margin: auto; 元素僅會水平居中，并不會進行垂直居中。
此時就需要設置元素的 position 為 absolute，父級元素的 position 為 relative，同時元素的上下左右都需要設置為 0。
<divclass="box">
<divclass="center1"></div>
</div>
.box{
width:200px;
height:200px;
background-color:#eee;
position:relative;
margin-top:20px;
}
.center1{
width:50px;
height:50px;
background-color:#00ACED;
margin:auto;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
效果展示：
當已經知道了要進行水平垂直居中的元素的寬高時，就可以通過設置 position: absolute 來實現。
但是，使用的同時還需要結合其他屬性才完整實現。
因為，單是設置 absolute，上左距離均為一半，就會出現下面這種情況。
很顯然可以看到，元素并不是完全居中，僅隻有左上角的位置在中心點。
概念圖：
因此想要實現元素完全水平垂直居中，在設置了 absolute 定位後，可以設置 margin 值為負，或者使用 calc 來計算，上左距離在 50% 的基礎上還要減去元素本身一半的寬高。
margin 值為負或者 calc 計算均是在已知元素寬高的情況下，假設不知道元素的寬高，那麼怎麼實現水平垂直居中呢？這裡就可以使用 transform 屬性，通過坐标位移來實現居中。
/*結合margin*/
.center2{
width:50px;
height:50px;
background-color:#7FFFD4;
position:absolute;
left:50%;
top:50%;
margin-left:-25px;
margin-top:-25px;
}
/*結合calc計算*/
.center2{
width:50px;
height:50px;
background-color:#7FFFD4;
position:absolute;
left:calc(50%-25px)
top:calc(50%-25px);
}
/*結合transform*/
.center2{
width:50px;
height:50px;
background-color:#7FFFD4;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
效果展示：
可以通過彈性布局來設置水平垂直居中，這裡需要設置父級元素 display:flex; 還需要設置兩個屬性，
水平布局 justify-content 以及垂直布局 align-items。
<divclass="box2">
<divclass="center4"></div>
</div>
.box2{
background-color:#eee;
width:200px;
height:200px;
position:relative;
margin-top:20px;
display:flex;
justify-content:center;
align-items:center;
}
.center4{
width:50px;
height:50px;
background-color:#B39873;
}
效果展示：
前面介紹的是元素如何實現水平垂直居中，下面介紹的是如何将文字進行水平垂直居中。
這第一個方法也是最經常用的，使用文本水平對齊 text-align 和行高 line-height 來實現的。
<divclass="box3">
<divclass="center5">文字居中</div>
</div>
.box3{
background-color:#eee;
width:200px;
height:200px;
margin-top:20px;
}
.center5{
text-align:center;
line-height:200px;
}
效果展示：
第二個方法可以通過網格布局 grid 來實現。而這裡通過 grid 有兩種方式實現，一種對元素本身屬性進行設置，另一種在元素的父級元素中設置。兩者看上去内容似乎差不多，不同的是在元素中設置的是 align-self 還要多了一個 margin，父級元素中是 align-items。
/*grid元素中設置*/
.box4{
background-color:#eee;
width:200px;
height:200px;
margin-top:20px;
display:grid;
}
.center6{
align-self:center;
justify-content:center;
margin:auto;
}
/*grid父級元素中設置*/
.box5{
background-color:#eee;
width:200px;
height:200px;
margin-top:20px;
display:grid;
align-items:center;
justify-content:center;
}
效果展示：
[若對您有幫助，請點擊跳轉到B站一鍵三連哦！感謝支持！！！](【面試題】CSS五種最常用水平垂直居中的方法_哔哩哔哩_bilibili)
,更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
