CSS完全可以居中任何你想居中的東西。

水平

• 內聯(lián)元素(inline-* elements or inline) 例如文字，鏈接等 ：
  可以通過text-align屬性直接將內聯(lián)元素水平居中。

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

• 塊級元素 :
  塊級元素才有盒子模型，所以我們考慮控制元素的<b>margin-left</b>和<b>margin-right</b>來使元素水平居中。

.center-me {
    margin: 0 auto;
}

• 多個塊級元素 :
  如果你想在一行里居中多個塊級元素，有兩種方案:

1. 設置為inline-block，然后父級元素直接設置<b>text-align</b>屬性。

/*html:*/
<div class="big_box">
    <div></div>
    <div></div>
</div>

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

2. 用flex布局來實現(xiàn)。

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

Paste_Image.png

垂直

垂直居中比較棘手

• 內聯(lián)元素

1. 元素只有一行，那么可以通過設置<b>padding-top</b>和<b>padding-bottom</b>相等，那么文本就居中啦。
   但有時候不能設置padding，那么可以通過<b>line-height</b>來使單行元素看起來垂直居中，但這只是看起來，只有單行時可以使用。
2. 多行的情況下，還是通過相等的垂直方向的padding，但如果設置了以后效果不佳的話，可以通過將元素以table的形式顯示，table中的td默認是垂直居中的。(比較out的做法)

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

Paste_Image.png

比較新潮一點的做法是用flexbox
一個flex元素可以很容易地在flex父級元素中垂直居中：

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

如果父容器有一個固定的高（就是不隨著內容的大小變化，是固定的px或者%）那么我們可以用幽靈元素ghost element技術。

在父元素中設置一個全高（100%）的偽元素，而我們要居中的元素以它為基準。

.ghost-center::before {
    content: " ";
    display: inline-block;
    height: 100%;
    width: 1%；
    vertical-align: middle;
}
.ghost-center p {
    display: inline-block;
    vertical-align:middle;
    width: 190px;
    margin: 0;
    padding: 20px;
    background: black;
}

• 塊級元素

1. 固定高度的元素：
   當高度確定時，我們可以用以下方式來垂直居中它：

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

2. 如果不是固定高度的：
   那么就通過

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

和上面一樣，還有個更簡單，更新潮的方法，就是使用flexbox

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

水平與垂直

可以手動組合上面的方法，但綜合來說用以下方案。

1. 確定高度和寬度
   一個兼容性比較好的解決方案是：

.parent {
    position: relative;
}
.child {
    width: 300px;
    height: 100px;
    padding: 20px;

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

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

2. 高度和寬度不確定
   倘若不確定高度和寬度，那么我們就用<b>transform</b>屬性，和一個負50%的translate 。

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

對，沒錯，用flexbox肯定更簡單，誰讓它就是用來解決布局問題的呢。

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