CSS居中全攻略

水平居中

内联元素

css的水平居中相对于垂直居中比较好些. 当要居中的元素是一个内联元素时, 只需要在其父元素上加上下面的一条css规则即可:

text-align: center;

块级元素

要居中的是一个块级元素, 那么设置元素的左右外边距为zuto即可. 即下面的规则:

margin-left: auto;
margin-right: auto;

多个块级元素

多个块级元素水平居中有两种方法, 第一种, 将这些块级元素设置为inline-block, 然后再在其元素上应用内联元素的水平居中方法.
第二种, 使用flex布局, 对其父元素使用下面的css规则:

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

垂直居中

垂直居中要比水平居中难.

内联元素

当只对一个内联元素使用垂直居中时, 只需将内敛元素的padding-top和padding-bottom值设置为一样即可.

.inline {
    padding-top: 30px;
    padding-bottom: 30px;
}

对多个内联元素垂直居中时, 也可以使用上面的方法进行设置.

块级元素

当我们知道块级元素的高度时, 我们可以使用绝对定位, top, margin-top属性进行居中

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

为什么要margin-top: 50px呢, 因为top: 50%是指child元素的边框到parent元素的边框为父级元素height值的50%. 所以要将child元素往上挪child的height值一半才居中.

当我们不知道元素的高度时, 可以使用css3的transform属性.

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

translateY(-50%)将child元素向上移动自身高度的一半.

我们还可以使用flex布局

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

flex-direction: column将flex布局的主轴改为列, 再设置主轴上的内容为居中.

水平居中同时对齐

当我们知道元素的宽高时, 使用下面的规则:

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

可以看出这些规则就是水平居中和垂直居中的规则的组合.

当我们不知道元素的宽高时, 使用css3属性:

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

我们开可以使用flex布局, 这也是我最常用, 最喜欢使用的布局.

.parent {
  display: flex;
  justify-content: center; /* 主轴(水平)居中*/
  align-items: center; /* 侧轴(垂直)居中*/
}

对父元素应用规则.

还可以使用最新出来的grid布局

body, html {
  height: 100%;
  display: grid;
}
span { /* thing to center */
  margin: auto;
}

不过, grid方式只有一个元素下才能工作.

参考资料

https://css-tricks.com/centering-css-complete-guide/
https://blog.csdn.net/Helloyongwei/article/details/79566925