老闆的手機收到一個紅包，為什麼紅包沒居中？
如何讓一個子元素在父容器裡水平垂直居中？這個問題必考，在實戰開發中，也應用得非常多。
你也許能順手寫出好幾種實現方法。但大部分人的寫法不夠規範，經不起千錘百煉。換句話說：這些人也就面試的時候誇誇其談，但真的上戰場的時候，他們不敢這麼寫，也不知道怎麼寫最靠譜。
這篇文章中，我們來列出幾種常見的寫法，最終你會明白，哪種寫法是最優雅的。
當然，我還會拿出實際應用中的真實場景來舉例，讓你感受一下标準垂直居中的魅力。
行内元素的居中問題比較簡單。
給父容器設置：
text-align: center;
讓文字的行高 等于 盒子的高度，可以讓單行文本垂直居中。比如：
.father {
height: 20px;
line-height: 20px;
}
這一段是本文的核心。如何讓一個塊級的子元素在父容器裡水平垂直居中？有好幾種寫法。我們一起來看看。
在 CSS 中對元素進行水平居中是非常簡單的：如果它是一個行内元素，就對它的父容器應用 text-align: center；如果它是一個塊級元素，就對它自身應用 margin: auto或者 margin: 0 auto。
在這裡，margin: auto相當于margin: auto auto auto auto。margin: 0 auto相當于margin: 0 auto 0 auto，四個值分别對應上右下左。其計算值取決于剩餘空間。
但是，如果要對一個元素垂直居中，margin: auto就行不通了。
比如下面這段代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.father{
height: 500px;
background: pink;
}
.son {
width: 300px;
height: 200px;
background: red;
margin: auto;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script></script>
</body>
</html>
上面的代碼中，父元素和子元素都是定寬高的，即便在這種情況下，我給子元素設置 margin: auto，子元素依然沒有垂直居中。
那還有沒有比較好的通用的做法呢？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father{
position: relative;
min-height: 500px;
background: pink;
}
.son {
position: absolute;
width: 200px;
height: 100px;
background: red;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">子元素的内容</div>
</div>
<script></script>
</body>
</html>
代碼解釋：我們先讓子元素的左上角居中，然後向上移動寬度的一半(50px)，就達到了垂直居中的效果；水平居中的原理類似。
不足之處：要求指定子元素的寬高，才能寫出 margin-top 和 margin-left 的屬性值。
但是，在通常情況下，對那些需要居中的元素來說，其寬高往往是由其内容來決定的，不建議固定寬高。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father{
position: relative;
min-height: 500px;
background: pink;
}
.son {
position: absolute;
background: red;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="father">
<div class="son">子元素的内容</div>
</div>
<script></script>
</body>
</html>
這種寫法，在沒有指定子元素寬高的情況下，也能讓其在父容器中垂直居中。因為 translate() 函數中使用百分比值時，是以這個元素自身的寬度和高度為基準進行換算和移動的（動态計算寬高）。
将父容器設置為 Flex 布局，再給父容器加個屬性justify-content: center，這樣的話，子元素就能水平居中了；再給父容器加個屬性 align-items: center，這樣的話，子元素就能垂直居中了。
代碼舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: pink;
}
.son {
background: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son">子元素的内容</div>
</div>
<script></script>
</body>
</html>
上面這種寫法，不足之處在于：給父容器設置屬性justify-content: center和align-items: center之後，導緻父容器裡的所有子元素們都垂直居中了（如果父容器裡有多個子元素的話）。可我明明想讓指定的某個子元素居中，要怎麼改進呢？
我們隻需寫兩行聲明即可：先給父容器設置 display: flex，再給指定的子元素設置我們再熟悉不過的 margin: auto，即可讓這個指定的子元素在剩餘空間裡，水平垂直居中。大功告成。
代碼舉例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.father{
display: flex;
min-height: 100vh;
background: pink;
}
.son {
margin: auto;
background: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son">子元素的内容，想水平垂直居中</div>
<div class="son2">這個元素不想水平垂直居中</div>
</div>
<script></script>
</body>
</html>
請注意，當我們給父容器使用 Flex 布局 時，子元素的margin: auto不僅能讓其在水平方向上居中，垂直方向上也是居中的。
,更多精彩资讯请关注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 
