人們經(jīng)常抱怨在CSS中居中元素的問題，其實(shí)這個(gè)問題其實(shí)并不復(fù)雜，只是因?yàn)榉椒ū姸啵枰鶕?jù)情況從眾多方法中選取一個(gè)出來。

水平居中

1. inline-block配合text-align (可不定寬使用)

你可以輕松的在一個(gè) block 元素中水平居中一個(gè) inline 元素，以下代碼對(duì) inline，inline-block，inline-table 和 inline-flex 等有效。當(dāng)子元素不是以上類型時(shí)可以設(shè)置display: inline-block。

.parent {
  text-align: center;
}

2.margin:0 auto方法

在 block 元素被設(shè)定固定寬度的情況下，可以使用設(shè)置元素 margin-left 和 margin-right 的值為 auto 的方法實(shí)現(xiàn)水平居中。

.child {
  width: 100px;
  margin: 0 auto;
}

當(dāng)block 元素未被設(shè)定固定寬度的情況下，只需要在子元素的css中加 display:table;即可。

.parent {
  width: 200px;
  height: 200px;
  background: #ccc;
}
.child {
/*width: 100px;
  height: 100px; */
  background: rgba(199,1,1,0.2);
  display: table;
  margin: 0 auto;
}

3. absolute配合transform （可不定寬使用）

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

4. 使用Flex布局

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

垂直居中

1. 垂直居中 inline 或者 inline-* 元素

1.1 單行

inline/text 元素可以簡(jiǎn)單的用設(shè)置相同的上下 padding 值達(dá)到垂直居中的目的。

.center {
  pading-top: 30px;
  padding-bottom: 30px;
}

如果因?yàn)槟撤N原因不能使用 padding 的方法，你還可以設(shè)置 line-height 等于 height來達(dá)到目的。

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

1.2 多行

相同的上下 padding 也可以適用于此種情況，如果不能生效，你可以嘗試將該元素的父元素的 dispaly 設(shè)置為 table ，同時(shí)該元素的 dispaly 設(shè)置為 table-cell，然后設(shè)置 vertical-align。

.parent {
  display: table;
  width: 200px;
  height: 400px;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

如果上述方法不能使用，你可以嘗試使用 flexbox,一個(gè)單獨(dú)的 flexbox 子元素可以輕易的在其父元素中居中。謹(jǐn)記，這種方法需要父元素有固定的高度。

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

如果上述兩種方式均不能使用，你可以使用“幽靈元素”技術(shù)，這種方法采用偽元素 ::before 撐開高度 ，文字垂直居中。

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

2. 垂直居中 block 類的元素

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

使用 flexbox

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

水平垂直居中

1. inline-block配合text-align加上table-cell配合vertical-align

.parent{
    display: table-cell;
    vertical-align:middle;
    text-align:center;
}
.child{
    display: inline-block;
}

不過使用這種方法需注意，如需實(shí)現(xiàn)嚴(yán)格的垂直居中需在父元素中設(shè)置font-size:0；

2. absolute配合transform

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

3. 使用 flexbox

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

參考資料
segmentfault: CSS之各種居中
segmentfault: CSS居中完全指南