【原創】碼路工人 Coder-Power
大家好，這里是碼路工人有力量，我是碼路工人，你們是力量。
做Web開發少不了做頁面布局。碼路工人給大家總結一下水平居中，垂直居中，水平垂直居中的布局實現。
1.水平居中
通過以下四種方式，將實現下圖中的效果
1.1 利用父級 text-align: center; 加子級 display: inline-block;（只要是inline-的都可以）實現子元素水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>layout-h-center-1.html</title>
<style>
/* 為了不影響理解，對於布局非關鍵的樣式單獨放在這里 */
body {
background-color: lightgray;
}
.parent {
background-color: lightblue;
width: 500px;
height:400px;
}
.child {
background-color: lightyellow;
width: 300px;
height:200px;
}
/* 布局關鍵樣式在這里 */
.parent {
text-align: center;
}
.child {
display: inline-block;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
1.2 利用彈性布局 flex，將父級設為 display: flex; 加 justify-content: center; 實現子元素水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>layout-h-center-2.html</title>
<style>
/* 為了不影響理解，對於布局非關鍵的樣式單獨放在這里 */
body {
background-color: lightgray;
}
.parent {
background-color: lightblue;
width: 500px;
height:400px;
}
.child {
background-color: lightyellow;
width: 300px;
height:200px;
}
/* 布局關鍵樣式在這里 */
.parent {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
1.3 利用相對布局加平移，將子級設為 position: relative; 加 left: 50%; 加 transform: translateX(-50%); 實現子元素水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>layout-h-center-3.html</title>
<style>
/* 為了不影響理解，對於布局非關鍵的樣式單獨放在這里 */
body {
background-color: lightgray;
}
.parent {
background-color: lightblue;
width: 500px;
height:400px;
}
.child {
background-color: lightyellow;
width: 300px;
height:200px;
}
/* 布局關鍵樣式在這里 */
.child {
position: relative;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
1.4 將子元素左右間距設為 auto 實現子元素水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>layout-h-center-4.html</title>
<style>
/* 為了不影響理解，對於布局非關鍵的樣式單獨放在這里 */
body {
background-color: lightgray;
}
.parent {
background-color: lightblue;
width: 500px;
height:400px;
}
.child {
background-color: lightyellow;
width: 300px;
height:200px;
}
/* 布局關鍵樣式在這里 */
.child {
margin: 0 auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
2. 垂直居中
通過以下四種方式，將實現下圖中的效果
2.1 利用 table-cell ，將父級設為 display: table-cell; 加 vertical-align: middle; 實現子元素垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>layout-v-center-1.html</title>
<style>
/* 為了不影響理解，對於布局非關鍵的樣式單獨放在這里 */
body {
background-color: lightgray;
}
.parent {
background-color: lightblue;
width: 500px;
height:400px;
}
.child {
background-color: lightyellow;
width: 300px;
height:200px;
}
/* 布局關鍵樣式在這里 */
.parent {
display: table-cell;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
2.2 利用彈性布局 flex，將父級設為 display: flex; 加 align-items: center; 實現子元素垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>layout-v-center-2.html</title>
<style>
/* 為了不影響理解，對於布局非關鍵的樣式單獨放在這里 */
body {
background-color: lightgray;
}
.parent {
background-color: lightblue;
width: 500px;
height:400px;
}
.child {
background-color: lightyellow;
width: 300px;
height:200px;
}
/* 布局關鍵樣式在這里 */
.parent {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
2.3 利用相對布局加平移，將子級設為 position: relative; 加 top: 50%; 加 transform: translateY(-50%); 實現子元素垂直居中
子元素的左上角頂點固定到父元素的垂直中點，
然后再以自身的一半向上平移，實現垂直居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>layout-v-center-3.html</title>
<style>
/* 為了不影響理解，對於布局非關鍵的樣式單獨放在這里 */
body {
background-color: lightgray;
}
.parent {
background-color: lightblue;
width: 500px;
height:400px;
}
.child {
background-color: lightyellow;
width: 300px;
height:200px;
}
/* 布局關鍵樣式在這里 */
.child {
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
2.4 通過絕對布局加 margin ，將父級設為 position: relative; ，加子元素設上下左右均為 0 並且 margin: auto 0; 實現子元素垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>layout-v-center-4.html</title>
<style>
/* 為了不影響理解，對於布局非關鍵的樣式單獨放在這里 */
body {
background-color: lightgray;
}
.parent {
background-color: lightblue;
width: 500px;
height:400px;
}
.child {
background-color: lightyellow;
width: 300px;
height:200px;
}
/* 布局關鍵樣式在這里 */
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto 0;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
3. 水平垂直居中
通過以下四種方式，將實現下圖中的效果
上面分別列舉了水平居中與垂直居中的4種實現方式，那么要實現水平+垂直的居中，就很容易了，把上面的組合起來就可以。為了統一好看，我們還是列舉4個代碼樣例片段吧。
3.1 與前文的第一種對應
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>layout-h-center-1.html</title>
<style>
/* 為了不影響理解，對於布局非關鍵的樣式單獨放在這里 */
body {
background-color: lightgray;
}
.parent {
background-color: lightblue;
width: 500px;
height:400px;
}
.child {
background-color: lightyellow;
width: 300px;
height:200px;
}
/* 布局關鍵樣式在這里 */
.parent {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child {
display: inline-block;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
3.2 與前文的第二種對應
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>layout-h-center-1.html</title>
<style>
/* 為了不影響理解，對於布局非關鍵的樣式單獨放在這里 */
body {
background-color: lightgray;
}
.parent {
background-color: lightblue;
width: 500px;
height:400px;
}
.child {
background-color: lightyellow;
width: 300px;
height:200px;
}
/* 布局關鍵樣式在這里 */
.parent {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
3.3 與前文的第三種對應
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>layout-h-center-1.html</title>
<style>
/* 為了不影響理解，對於布局非關鍵的樣式單獨放在這里 */
body {
background-color: lightgray;
}
.parent {
background-color: lightblue;
width: 500px;
height:400px;
}
.child {
background-color: lightyellow;
width: 300px;
height:200px;
}
/* 布局關鍵樣式在這里 */
.child {
position: relative;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
/* translateX 與 translateY 要寫在一個 transform 里 */
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
3.4 與前文的第四種對應
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>layout-h-center-1.html</title>
<style>
/* 為了不影響理解，對於布局非關鍵的樣式單獨放在這里 */
body {
background-color: lightgray;
}
.parent {
background-color: lightblue;
width: 500px;
height:400px;
}
.child {
background-color: lightyellow;
width: 300px;
height:200px;
}
/* 布局關鍵樣式在這里 */
.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
列舉了這么多，大家都掌握了嗎？
其實也不必全部掌握，上面的布局實現，以 flex 實現方式作為重點。
這里主要總結幾種方式，沒有過多糾結其中細節。
碼路工人認為，將來的話 flex 與 grid 布局方式會成為主流。這兩個不是哪個好的問題，而是相互補充，flex 簡單說就是一行一列（實際上里面也有很多），grid 的話就理解為類似 Bootstrap 的柵格吧，多行多列。
建議布局方面的話，學習 flex 跟 grid 。碼路工人作為轉前端的新手，CSS 知識淺薄，就暫時不獻丑了。以后，也可以做個 CSS3基礎 的學習系列。不過暫時呢，還是要把我們的 ES6基礎系列 寫完。（感覺有太多事情要做有木有？。。）
以上。
希望對你能有幫助，下期再見。
歡迎關注分享，一起學習提高吧。
QRCode/微信訂閱號二維碼
