【原创】码路工人 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;
500px;
height:400px;
}
.child {
background-color: lightyellow;
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;
500px;
height:400px;
}
.child {
background-color: lightyellow;
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;
500px;
height:400px;
}
.child {
background-color: lightyellow;
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;
500px;
height:400px;
}
.child {
background-color: lightyellow;
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;
500px;
height:400px;
}
.child {
background-color: lightyellow;
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;
500px;
height:400px;
}
.child {
background-color: lightyellow;
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;
500px;
height:400px;
}
.child {
background-color: lightyellow;
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;
500px;
height:400px;
}
.child {
background-color: lightyellow;
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;
500px;
height:400px;
}
.child {
background-color: lightyellow;
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;
500px;
height:400px;
}
.child {
background-color: lightyellow;
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;
500px;
height:400px;
}
.child {
background-color: lightyellow;
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;
500px;
height:400px;
}
.child {
background-color: lightyellow;
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/微信订阅号二维码
