居中的css:徹底指南(翻譯)

這裏主要參考的是CHRIS COYIER寫的一篇的文章(點擊查看)，主要講了關於css水平、垂直居中的一些方法,每一個方法後面都有一個demo，能夠在線查看效果。

1 水平

水平居中有行內元素和塊元素，行內元素有文字、圖片、連接等；塊元素主要是div、p等block元素。

1.1 行內元素

對於行內元素可使用以下實現水平居中(在線查看demo)：

.blocklist1_1 {    
    text-align: center;
}

這種方法對於inline，inline-block，inline-table等都有效。

1.2 塊元素

對於一個塊元素，能夠設置其margin-left和margin-right自動，就像這樣(在線查看demo)：

.blocklist1_2 .div1 {    
    margin: 0px auto;
}

不管塊元素的寬度是否已知，均可以實現水平居中。

1.3 多個塊元素

若是有多個塊元素須要水平居中時，有兩種辦法能夠實現。一種是藉助inline-block，另外一種是藉助flex。對於第一種方法可使用以下方式(在線查看demo)，設置塊元素display:inline-block,其父元素水平居中：

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

用flex的話須要給塊的父元素添加以下樣式(在線查看demo)：

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

2 垂直

垂直居中也分有行內元素和塊元素，不過相比水平居中，垂直居中這裏須要討論的狀況有點多，下面咱們一一分析。

2.1 行內元素

2.1.1 單行

對於單行的行內元素，咱們只須要設置其padding-top和padding-bottom值相等便可(在線查看demo):

.blocklist2_1_1 .div1 {    
    padding-top: 20px;    
    padding-bottom: 20px;    
}

若是咱們不能設置padding的話，而行內元素的高度(height=50px)已知時，能夠設置line-height=height,實現元素的垂直居中(在線查看demo)：

.blocklist2_1_1 .div2 {    
    line-height: 50px;    
    height: 50px;    
}

2.1.2 多行

對於多行元素咱們有四種方式能夠實現垂直居中：

• a.能夠像上面那樣經過設置padding-top和padding-bottom的值相等來實現垂直居中(demo-1)：

.blocklist2_1_2 .div1 {   
    padding: 20px 0px;  
}

• b.能夠藉助vertical-align屬性來實現垂直居中(demo-2)：

.blocklist2_1_2 .div2 {   
    display: table;    
}    
.blocklist2_1_2 .div2>div {    
    display: table-cell;    
    vertical-align: middle;    
}

• c.能夠藉助flex技術來實現垂直居中，只需添加以下樣式(demo-3)：

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

• d.將一個全高度的僞元素放置在容器內，而後設置文本垂直對齊(demo-4)：

.blocklist2_1_2 .div4 {    
    position:relative;    
}    
.blocklist2_1_2 .div4::before {    
    content: ' ';    
    display: inline-block;    
    height: 100%;    
    width: 1%;    
    vertical-align: middle;    
}    
.blocklist2_1_2 .div4>div {    
    display: inline-block;    
    vertical-align: middle;    
}

2.2 塊元素

2.2.1 塊元素高度已知

在網頁佈局中有的時候咱們知道元素的高度，有的時候咱們不知道。對於已知高度的塊元素能夠這樣設置來實現垂直居中(demo)：

.blocklist2_2_1 .div {    
    position: relative;    
}   
.blocklist2_2_1 .div div {    
    position: absoulte;
    top: 50%;    
    height: 100px;
    margin-top: -70px; //這裏70px是height*1/2 + padding    
    padding: 20px;    
}

2.2.2 塊元素高度未知

有時候咱們是不知道塊元素的高度的，這時候可使用transform來實現(demo):

.blocklist2_2_2 .div {    
    position: relative;    
}    
.blocklist2_2_2 .div div {    
    transform: translateY(-50%);    
    top: 50%;    
    position: absoulte;    
}

2.2.3 利用flex實現

除了以上兩種辦法，還可使用flex實現(demo):

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

3 水平垂直

有的時候咱們不只但願水平居中還但願垂直居中，能夠結合以上提到的例子進行組合實現，主要分爲如下三個方面：

3.1 元素高度、寬度已知

當元素高度和寬度已知時，能夠將元素絕對定位，偏移中心50%，而後使用負的margin值實現，以下(demo):

.blocklist3_1 .div {    
    position: relative;    
}    
.blocklist3_1 .div div {    
    position: absoulte;
    top: 50%;    
    left: 50%;    
    margin: -120px 0px 0px -220px;    //height一半，width一半，另外加上padding值
    height: 200px;    
    width: 400px;    
    padding: 20px;    
}

3.2 元素高度、寬度未知

若是元素的高度和寬度未知呢，咱們可使用變換屬性，在兩個方向賦予50%的負值，以下(demo):

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

3.3 利用flexbox實現

用flex實現時須要使用兩個中心屬性(demo)：

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