CSS居中指南

CSS居中指南

关于CSS中的居中一直是被经常抱怨的子问题之一，为什么想实现一个居中有时候非常困难？其实重点不是居中本身实现起来难，而是我们需要考虑很多种情况下实现css居中的方法，所以有时候在不同的情况下不知道应该选择哪一种，所以在这里我们梳理一下。

• CSS居中指南
  
  • 水平居中
    
    • 内联元素
    • 块级元素
    • 多个块级元素
      
      • 想让块级元素在同一行就得将其设置成inline-block，然后对父元素设为text-align,其实这个就和第一种相同了
      • 当然如果你会用flex布局，就可以更简单的实现，对父元素添加如下属性：
  • 垂直居中
    
    • 内联元素
      
      • 内联元素内容只有一行
      • 内联元素内容有多行
    • 块级元素
      
      • 知道元素高度
      • 不知道元素高度
      • flex布局
  • 水平垂直居中
    
    • 确定的宽高
    • 宽高位置
    • flex布局
    • grid布局

水平居中

内联元素

设置父元素text-align属性

.center-children {
  text-align: center;
}

这个对inline, inline-block, inline-table, inline-flex属性都适用。

块级元素

想让一个块级元素居中，把它的margin置为如下值就可以了

.center-me {
  margin: 0 auto;
}

多个块级元素

想让块级元素在同一行就得将其设置成inline-block，然后对父元素设为text-align,其实这个就和第一种相同了

.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}

当然如果你会用flex布局，就可以更简单的实现，对父元素添加如下属性：

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

2.如果不需要同一行，统一让父元素下的块级元素添加margin属性：

main div {
  margin: 0 auto;
}

垂直居中

垂直居中要比水平居中更麻烦一点。

内联元素

内联元素内容只有一行

子元素容器设置上下相同的padding

main a {
  background: black;
  color: white;
  padding: 40px 30px;
  text-decoration: none;
}

如果你的padding属性有其他用处，最好还是将容器的height和line-height属性置成相同的高度：

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}

内联元素内容有多行

上下padding相同的方式有时候会有效；
同时如果是表单元素，

下的单元格内容是默认垂直居中的，当然我们也可以给其它类型的inline元素的父级这是display:table，给该内联元素设置display:table-cell;vertical-align:middle;来达到垂直居中的效果：

<table>
  <tr>
    <td>
      I'm vertically centered multiple lines of text in a real table cell.
    </td>
  </tr>
</table>

<div class="center-table">
  <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
</div>

body {
  background: #f06d06;
  font-size: 80%;
}

table {
  background: white;
  width: 240px;
  border-collapse: separate;
  margin: 20px;
  height: 250px;
}

table td {
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  /* default is vertical-align: middle; */
}

.center-table {
  display: table;
  height: 250px;
  background: white;
  width: 240px;
  margin: 20px;
}
.center-table p {
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;
}

垂直居中同样可以同flex布局解决，父级元素如下设置就可以了，详细的flex布局可以看我的另一篇博文（硬广一波）：

.flex-center-vertically {
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 400px;
}

这里我们必须保证给容器一个确定的高，%,px等单位都可以。
如果前面两种方式都实现不了，我们可以使用”ghost element”，设置容器的position:relative;

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
}

块级元素

不了解网页布局的高度是很常见的，原因很多：如果宽度变化，文档流可以改变高度。文字样式的变化可以改变高度。文字数量的变化可以改变高度。具有固定长宽比的元素（如图像）可以在调整大小时改变高度，等等。

知道元素高度

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
}

不知道元素高度

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

flex布局

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

水平垂直居中

确定的宽高

.parent {
  position: relative;
}

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

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

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

宽高未知

.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;
}

本文译自Centering In CSS