CSS居中傻傻搞不懂？教你！
不会吧，不会吧，不会有人 2021 年还在用百分比写 div 居中吧？
每每说到 CSS 如何让一个块居中，dalao 们总是会嘲笑一番这种弱智问题。然而事实上在前端小白（包括我以前）初学网页设计的时候，往往会因为这一个问题摸不着头脑，甚至出现有用百分比和 text-aligin 尝试让块元素居中的”沙雕“行为。
.. 咳咳，说的就是初学时的我。一通代码猛如虎，最后却发现写的啥都不是。
那么这篇文章就让我为大家细细讲解实现水平居中的两种方式，以及 flex 布局下的垂直居中。
传统浮动布局
相信大家也都是和我一样，从最初的 float 布局开始学习 CSS 的。float 布局通过简单的浮动和清除浮动实现了复杂的样式布局在网页中的定位。
属性简写
对于学习 CSS 的小伙伴来说，margin（外边距）和 padding（内边距）这俩个熟悉大家一定不陌生。顾名思义，margin 就是指外边距，padding 就是指内边距。除了一个个手动设置 -top，-bottom，-left，-right 以外，这两个属性都有一种通用的简写方式。
margin:10px 5px 15px 20px;上面这种写法，分别代表了外边距的 上，右，下，左，即 margin-top，margin-right，margin-bottom，margin-left 分别为 10px，5px，15px，20px。
margin:10px 5px 15px;上面这种写法，分别代表了外边距的 上，左右，下，，即 margin-top，margin-x，margin-bottom，分别为 10px，5px，15px。
margin:10px 5px;上面这种写法，分别代表了外边距的 上下，左右，即 margin-y，margin-x，分别为 10px，5px。
margin:10px;上面这种写法，则表示四边的外边距均为 10px。
浮动布局实现水平居中（margin: 0, auto 的由来）
边距 margin 和 padding 除了可以设置为数值，还支持配置为 auto 属性，来由浏览器计算外边距。
填充规则：
- 如果一侧定值，一侧 auto，则 auto 为剩余空间大小
- 如果两侧均是 auto，则平分剩余空间
因此接下来的就很好理解了。如果我们要实现水平居中，就只需要让 margin-left 和 margin-right 为 auto 就可以让浏览器自动分配剩余的左右空间了。
这里我们写一个简单的栗子🌰：
<html>
<head>
<meta charset="utf-8">
<title>HTML5</title>
<style type="text/css">
body{
width: 100%;
height: 100vh;
background-color: rgb(252, 205, 136);
}
.box{
width: 300px;
height: 150px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="box"><p>学长帆帆</p></div>
</body>
</html>
运行后效果：
这时候，我们给 class 为 box 的 div 设置 margin : 0 auto 0 auto 后
.box{
/* 简写 */
margin: 0 auto;
/* 居中 */
/* margin: 10px auto 10px auto; */
/* 居左 */
/* margin: 10px auto 10px 10px; */
/* 居右 */
/* margin: 10px 10px 10px auto; */
width: 300px;
height: 150px;
background-color: aquamarine;
}可以看到，中间的蓝绿色 div 已经在页面中成功居中了。同样的，根据文章开头讲过的简写，我们可以将 margin : 0 auto 0 auto 简写为 margin : 0 auto
flex 布局实现
刚才和大家分享了浮动布局，想必大家都已经学会了水平居中的方式。但是我们强大的 flex 布局可不仅仅可以用来写水平居中，还能够写垂直居中。
水平居中
这里我们用一个小栗子🌰来和大家说明，如何使用 flex 布局实现水平居中：
<template>
<div class="about">
<div class="box_outer">
<div class="box_inner"><p>学</p></div>
<div class="box_inner"><p>长</p></div>
<div class="box_inner"><p>帆</p></div>
<div class="box_inner"><p>帆</p></div>
</div>
</div>
</template>
<style scoped lang="scss">
.about {
background-color: rgb(217, 186, 247);
display: flex;
// 水平居中
justify-content: center;
width: 100%;
height: 100vh;
}
.box_outer {
width: 800px;
height: 500px;
background-color: bisque;
}
</style>
运行后效果：
垂直居中
可以看到，我们通过给外层 div 加上了 display: flex; justify-content: center; 就实现了内层 div 的水平居中。那么如果要是垂直居中呢？其实只要加一行代码：align-items: center; 即可
.about {
background-color: rgb(217, 186, 247);
display: flex;
// 水平居中
justify-content: center;
// 垂直居中
align-items: center;
width: 100%;
height: 100vh;
}运行效果：
多元素居中
既然一个单独的 div 可以通过三行代码轻松实现垂直和水平方向上的居中，那么如果是好多个div呢？其实同样的，刚才的三行代码也可以办到！
这里我们为 box_outer 内的四个 box_inner 设置样式，并且在 box_outer 的属性中加上刚才的三行居中代码：
.box_outer {
width: 800px;
height: 500px;
background-color: bisque;
display: flex;
// 水平居中
justify-content: center;
// 垂直居中
align-items: center;
// flex-direction: column;
.box_inner {
width: 80px;
height: 50px;
background-color: rgb(196, 255, 242);
margin: 15px;
// float: left;
// align-self: center;
}
}运行效果：
可以看到四个 inner_box 很完美的在 outer_box 里实现了垂直水平居中。
高级：改变方向
flex-direction 可以用来控制 flex 元素的布局排列顺序。如果我们不加以设置，将会取默认值 row。如果我们手动将 flex-direction 改为 column 会发生什么呢？
flex-direction: column;可以看到，原先横向排列的四个 inner_box 现在变成了竖向排列，且仍然保持了垂直和水平居中！
那么到这里你是不是也学会了 CSS 的居中呢？如果需要源代码，可以在公众号聊天界面回复 “代码居中” 即可！
This blog is under a CC BY-NC-ND 4.0 Unported License
本文链接：https://coding.emptinessboy.com/2021/04/CSS%E5%B1%85%E4%B8%AD%E5%82%BB%E5%82%BB%E6%90%9E%E4%B8%8D%E6%87%82%EF%BC%9F%E6%95%99%E4%BD%A0%EF%BC%81/