前言
居中可以说是网页布局中非常常见的布局了，垂直居中，水平居中，其中又分为块级元素和行内元素，没有系统的整理过还真有点搞不清楚。来看看各式各样的居中到底有多少种。
水平居中
行内元素水平居中
行内元素水平居中最常见的场景就是文字居中，最常用的就是对其父元素设置 text-align:center,这个方法对一下几种元素都有效：
- display:inline
- display:inline-block、
- display:inline-table
- display:inline-flex
<div class="parent">
<a>我的博客</a>
</div>
.parent{
text-align:center;
}
显示效果
块级元素水平居中
1.设为行内元素使用居中
看完行内元素居中我们很容易就会想到，可以将块级元素手动设置为行内元素，再使用text-align:center居中
<div class="parent">
<div class="child">
还是我的博客
</div>
</div>
.parent {
text-align: center;
}
.child {
display: inline;
background-color: red;
color: white;
}
显示效果
当然如果有对元素设置宽高的需求的话设置 display:inline-block 即可
2. 使用左右 margin:auto
通过将块状元素的左右 margin 设置为 auto 可以使左右 margin 平分所剩下的空间，得到的效果自然就是元素水平居中了，不过前提是块状元素需要设置好宽度
<div class="child"></div>>
.child {
width: 100px;
height: 50px;
margin: 0 auto;
background-color: blue;
}
通过控制台查看布局可以看到，蓝色元素左右被等宽的 margin 占据。
enter description here
这种方式更合适元素独占一行的情况，因为都被 margin 占满了无法再添加其他元素了。
3.使用table+margin
使块级元素获得宽度除手动设置 width 之外，还可以通过设置 display: table。此时元素宽度为内容宽度，所以块状元素内部需要有内容，不然就会坍塌不见。同样占据一整行。
<div class="child">我的博客</div>>
.child {
display: table;
margin: 0 auto;
background-color: blue;
color: white;
}
截图
4.使用absolute+transform
先将父元素设置为相对定位，对子元素使用绝对定位，让子元素向右移动父元素宽度的一般，然后向左移动子元素自己宽度的一般
<div class="parent">
<div class="child">
我的博客
</div>
</div>
.parent {
position: relative;
}
.child {
background-color: blue;
color: white;
left: 50%; // left 设置百分比即为父元素宽度的百分比
transform: translateX(-50%); //translateX 百分比是自己宽度的百分比
position: absolute;
}
enter description here
这样设置的元素是脱离正常文档流的，不影响其他元素布局。但是有比较少的浏览器不支持设置 transform 属性。
enter description here
5.使用flex+justify-content
这也是我使用的最多的一种居中方式了，通过使用 flex 布局 方式可以很轻松的实现水平居中，
设置 justify-content: center;即可实现子元素水平居中排列，其中 justify-content 用于设置弹性盒子元素在主轴（默认横轴）方向上的对齐方式
<div class="parent">
<div class="child">
我的博客
</div>
</div>
.parent {
display: flex;
justify-content: center;
}
.child {
background-color: blue;
color: white;
}
enter description here
可以看到我们并没有设置子元素的宽度，在 flex 布局下 div 宽度自动收缩到了内容宽度，效果和使用 display: table 一样，这时同样可以通过设置 margin:0 auto 居中，但是这明显不是我们使用 flex 布局的初衷。通过使用 flex 布局元素无需脱离正常文档流，无需独占一行。当然不可避免的会有一小部分浏览器不兼容。
enter description here
6. 利用绝对定位元素自动伸缩
代码如下：
<div class="parent">
<div class="child"></div>
</div>
.parent {
position: relative;
}
.child {
position: absolute; /*绝对定位*/
width: 200px;
height: 100px;
background: blue;
margin: 0 auto; /*水平居中*/
left: 0; /*此处不能省略，且为0*/
right: 0; /*此处不能省略，且为0*/
}
enter description here
多块级元素水平居中
1.使用 flex 布局
利用弹性布局(flex)，同样可以实现多块级元素水平居中。
<div class="parent">
<div class="child">
我的博客
</div>
<div class="child">
我的博客
</div>
<div class="child">
我的博客
</div>
</div>
.parent {
display: flex;
justify-content: center;
}
.child {
background-color: blue;
color: white;
margin-left: 10px;// 只是为了分离开元素
}
enter description here
2. 利用inline-block
将要水平排列的块状元素设为display:inline-block，然后在父级元素上设置text-align:center，达到与上面的行内元素的水平居中一样的效果。
<div class="parent">
<div class="child">
我的博客
</div>
<div class="child">
我的博客
</div>
<div class="child">
我的博客
</div>
</div>
.parent {
text-align: center;
}
.child {
background-color: blue;
color: white;
margin-left: 10px;
display: inline-block;
}
浮动元素水平居中
1. 定宽的非浮动元素通过设置 relative + 负margin,
原理见下图：
enter description here
<div class="parent">
<div class="child">
我的博客
</div>
</div>
.child {
background-color: blue;
width: 100px;
height: 50px;
position: relative;
left: 50%;
margin-left: -50px;
}
注意：样式设置在浮动元素本身，父元素无需设置
enter description here
2.不定宽的浮动元素通过父子容器都相对定位居中
enter description here
<div class="parent">
<div class="child"></div>
</div>
.parent {
float: left;
position: relative;
left: 50%;
}
.child {
background-color: blue;
width: 100px;
height: 50px;
float: left;
position: relative;
right: 50%;
}
enter description here
可以看到 父元素组件也是偏移了位置的
3. 使用 flex 布局
flex 布局，强。这里就不赘述了，使用方法同上面一样
垂直居中
行内元素垂直居中
1. line-height = height
让父元素行高等于高度即可实现行内元素垂直居中
<div class="parent">
<a class="child">我的博客</p>
</div>
.parent {
background-color: red;
color: white;
height: 120px;
line-height: 120px;
}
.child {
}
效果截图：
enter description here
2. 利用表布局（table）
使用表布局的 vertical-align: middle 也可实现垂直居中
.parent {
background-color: red;
display: table;
height: 140px;
}
.child {
display: table-cell;
vertical-align: middle;
}
enter description here
块级元素垂直居中
1. absolute+负margin
在已知高度的情况下，可以使用 top:50% 让元素距离顶部为父元素高度的一半，然后使用 -margin 使元素向上位移自身高度的一一半，原理其实和上文水平居中里一种一样的
<div class="parent">
<div class="child"></div>
</div>
.parent {
position: relative;
background-color: antiquewhite;
height: 200px;
}
.child {
background-color: beige;
position: absolute;
top: 50%;
height: 100px;
width: 200px;
margin-top: -50px;
}
enter description here
通过这种思想很容易想出另外一种方法，那就是使用 transform 使元素位移，原理是一模一样的，就不单独列出。
2.使用flex+align-items
使用 flex 布局，通过设置父元素的 align-items 实现子元素的垂直居中
<div class="parent">
<div class="child"></div>
</div>
.parent {
background-color: antiquewhite;
height: 200px;// 父元素必须有高度才能实现垂直居中
display: flex;
align-items: center;
}
.child {
background-color: beige;
height: 100px;
width: 200px;
}
enter description here
这个方法对行内元素同样有限，将 <div class="child"></div>改为 <p>我的博客</p>
enter description here
水平垂直居中
1.Flex 布局
水平垂直居中就是组合使用 水平居中与垂直居中，不过要说最方便的还是使用 flex 布局
<div class="parent">
<div class="child"></div>
</div>
.parent {
background-color: antiquewhite;
height: 200px;// 父元素必须有高度才能实现垂直居中
display: flex;
align-items: center; // 垂直居中
justify-content: center; // 水平居中
}
.child {
background-color: beige;
height: 100px;
width: 200px;
}
enter description here
2.margin:auto
容器元素设为 flex 布局或是 grid 布局，子元素只要写 margin: auto 即可,不能兼容低版本的IE浏览器。
.parent {
background-color: antiquewhite;
height: 200px;
display: grid;
}
.child {
background-color: beige;
height: 100px;
width: 200px;
margin: auto;
}
enter description here
和 flex 布局有所不同的是可以看到父元素被 margin 填满了
总结
各种各样的居中方案一数竟然有差不多二十种，在实际开发中当然不会用到这么多，就我自己而言使用得最多的还是 margin:auto 和 flex 布局，研究这么多的目的知识为了更加熟悉 CSS 的一些特性，比如 -margin-left 是让元素左移，而 -margin-right则会让元素右边的元素唯一，元素本身保持不动。这个特性不去研究我还真不知道。还有可以看到最方便的 flex 布局不支持比较老的浏览器，兼容性有一定问题，但是我想说的是除非你是搭建政府网站，其实没必要去考虑兼容 IE6 这种老古董了。兼容没必要矫正过往，这只会恶心到自己。
网友评论