css居中方案汇总

1. 水平居中

1.1 行内或者具有行内元素性质的元素（比如文字或者链接）

使其父元素为块级元素的行内元素水平居中。

/* css */
.center-children {
    text-align: center;
}

1.2 单个块级元素(定宽)

设置块级元素的 margin-left 和 margin-right 为 auto ，来使其水平居中。
注意：这个块级元素要有 width 属性，否则会占满宽度，这时候已经不需要居中了。

/* css */
.center-me {
    margin: 0 auto;
}

1.3 多个块级元素（聚成一行居中）

方案一：利用display:inline-block; 块级元素inline-block,父元素text-align:center。

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

方案二：flex布局

/* css */
.flex-center {
  display: flex;
  justify-content: center;
}

1.4 多个块级元素（在各自行居中）

利用 margin: xxxpx auto;

/* css */
main div {
  margin: 0 auto;
}

2. 垂直居中

2.1 行内或者具有行内元素性质的元素（比如文字或者链接）

2.1.1 单行

方案一：padding-top === padding-bottom

/* css */
.link {
  padding-top: 30px;
  padding-bottom: 30px;
}

方案二：line-height === height
若 padding 无效，要使不换行的文字居中有一个技巧，设置文字的 line-height 和 height 的值相等。

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

2.1.2 多行

方案一：padding-top === padding-bottom
方案二：table化 结合 verticl-align
如果这种方法不奏效的话，可以设置文字所在的元素为一个 table cell（无论它直接是 table 还是用CSS使这个元素表现的像一个 table cell），结合 vertical-align 属性处理这种情况，它与我们通常所做的在行上处理元素对齐的方式不同：

/* css */
/* table 的情况 */
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; */
}
/* display:table 的情况 */
.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布局
注意：父元素height值(px %)固定

/* css */
.flex-center-vertically {
  display: flex;
  justify-content: center;   /* 排列方向变了，所以变成了垂直方向上的水平居中 */
  flex-direction: column;  /* 垂直排列 */
  height: 400px;
}

方案四：伪元素
原理：让一个完整高度的伪元素放置在容器内，并与文本垂直对齐。

/* css */
.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;
}

2.2 块级元素

2.2.1 元素高度确定

绝顶定位+百分比+负margin

/* css */
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; /* 考虑padding 和 border 如果不使用box-sizing: border-box; */
}

2.2.2 元素高度不确定

不知道元素的高度是比较常见的，有很多原因：如果宽度改变，文本回流会改变高度；文字样式改变会改变高度；文字数量改变会改变高度；一个固定比例的元素，比如图片，当重置尺寸的时候也会改变高度，等等。
方案一：绝对定位+百分比+transform

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

2.2.3 flex布局（通用）

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

3. 垂直水平居中

3.1 元素有固定的宽和高

绝对定位+百分比+负margin组合

/* css */
.parent {
  position: relative;
}
.child {
  width: 300px;
  height: 100px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -70px 0 0 -170px;  /* 感觉好傻，直接用下面的百分比方法也可以 */
}

3.2 元素的宽和高未知

方案一：绝对定位+百分比+transform组合

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

3.3 flex布局（通用）

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

3.4 grid布局（通用）

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

4. 参考链接

• https://css-tricks.com/centering-css-complete-guide/
• https://juejin.im/entry/583b954b61ff4b006b55b43d
• http://www.cnblogs.com/chaixiaozhi/p/8490725.html