CSS居中总结

正文

水平居中

行内元素

在父元素上设置

{    text-align: center;}

块级元素

单个元素

• 宽度固定
  将元素的左右margin设置为 auto

{    margin: 0 auto;}

• 宽度不固定
     1. 将该元素的display属性设置为table,左右margin设置为 auto

{    display: table;    margin: 0 auto;}

  这里利用了table标签的宽度自适应性，即宽度由文本长度决定。原元素经过转换后变成了宽度固定的元素。

   2. 将该元素的display属性设置为inline，同时在其父元素上设置text-align属性为center。

.parent {    text-align: center;}.child {    display: inline;}

  这也很好理解，将元素转换为行内元素，就可使用行内元素的居中方法。

  3. 利用float和relative定位，对父元素与子元素的属性做如下设置。

.parent {    float: left;    postition: relative;    left: 50%;}.child {    position: relaite;    left: -50%;}

  首先将父元素水平相对位置右移了50%，即此时父元素的左端处于中心位置。因为子元素铺满了父元素，因此子元素左端也处于中心位置。再将子元素的水平相对位置左移50%，此时相当于子元素的中心也已经居中。

多个元素

对于多个元素，无论子元素宽度是否固定，都应该优先考虑Flex布局，只用对父元素属性进行设置，就能实现居中效果。设置代码如下

.parent {    display: flex;    justify-content: center;}

Flex是一个神器，关于它的更多用法，可参考阮一峰的网络日志： Flex布局教程

---

垂直居中

行内元素

以下针对父元素高度确定的情况。

单行文本

对父元素设置使 line-height的值与height值相等。

多行文本

对父元素的属性做如下设置

.parent {    display: table-cell;    vertical-align: middle;}

块级元素

对于多个元素的垂直居中，同理应优先考虑Flex布局，以下仅考虑单个元素。

高度固定

对该元素及其父级元素的属性做如下设置

.parent {    position: relative;}.child {    height: 200px;    position: absolute;    top: 50%;    margin-top: -100px;}

高度不固定

对该元素及其父级元素的属性做如下设置

.parent {    position: relative;}.child {    position: absolute;    top: 50%;    transform: translateY(-50%);}

水平垂直同时居中

行内元素

按照行内元素水平、垂直居中方法共同设置即可。

块级元素

宽高固定

对该元素及其父级元素的属性做如下设置。

.parent {    position: relative;}.child {    position: absolute;    top: 0;    right: 0;    bottom: 0;    left: 0;    margin: auto;}

宽高不固定

使用Flex布局，做如下设置。

.parent {    display:flex;    justify-content: center;    align-items: center;}

结语

不同的居中方法适用于不同的场景，以上便是笔者总结掌握的方法，若有错误请帮忙指出，感激不尽。

参考文章

慕课网：水平居中总结-不定宽块状元素方法

CSS-TRICKS：Centering in CSS: A Complete Guide

Damonare： CSS居中小谈