css居中是前端開發(fā)中常用方法，掌握各種居中的方法可以提高開發(fā)效率，對(duì)準(zhǔn)確的還原設(shè)計(jì)頁(yè)面有很大的幫助。本文章整理了一些在開發(fā)中常用的居中技巧。

1.水平居中

1.1內(nèi)聯(lián)元素水平居中

利用text-align: center 可以實(shí)現(xiàn)在塊級(jí)元素內(nèi)部的內(nèi)聯(lián)元素水平居中。此方法對(duì)內(nèi)聯(lián)元素inline, 內(nèi)聯(lián)塊inline-block, 內(nèi)聯(lián)表(inline-table, inline-flex元素水平居中都有效。核心代碼：

.parent{
  text-align:center;
}

演示demo-1

1.2塊級(jí)元素水平居中

通過把固定寬度塊級(jí)元素的margin-left和margin-right設(shè)成auto，就可以使塊級(jí)元素水平居中。核心代碼：

.child{
margin:0 auto;
}

演示demo-2

1.3 多塊級(jí)元素水平居中

1.3.1 利用inline-block

如果一行中有兩個(gè)或兩個(gè)以上的塊級(jí)元素，通過設(shè)置塊級(jí)元素的顯示類型為inline-block和父容器的text-align屬性從而使多塊級(jí)元素水平居中。核心代碼：

.parent{
    text-align:center;
}
.child-1, .child-2{
    display:inline-block;  
}

演示demo-3

1.3.2 利用display: flex

利用彈性布局flex，實(shí)現(xiàn)水平居中，其中justify-content 用于設(shè)置彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式，本例中設(shè)置子元素水平居中顯示。核心代碼：

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

演示demo-4

2.垂直居中

2.1單行內(nèi)聯(lián)(inline-)元素垂直居中

通過設(shè)置內(nèi)聯(lián)元素的高度height和行高line-height相等，從而使元素垂直居中核心代碼：

.parent{
   height:150px;
   line-height:150px;
}

演示demo-5

2.2 多行元素垂直居中

2.2.1 利用表布局（table）

利用表布局的vertical-align: middle可以實(shí)現(xiàn)子元素的垂直居中。核心代碼：

.parent{
    display:table
}
.child{
   display: table-cell;
   vertical-align: middle; 
}

演示demo-6

2.2.2 利用flex布局

利用flex布局實(shí)現(xiàn)垂直居中，其中flex-direction: column定義主軸方向?yàn)榭v向。核心代碼：

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

演示demo-7

2.3 塊級(jí)元素垂直居中

2.3.1 固定高度的塊級(jí)元素

如果已知居中元素的高度和寬度，垂直居中問題就很簡(jiǎn)單。通過絕對(duì)定位元素距離頂部50%，并設(shè)置margin-top向上偏移元素高度的一半，就可以實(shí)現(xiàn)垂直居中了。核心代碼：

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

演示demo-8

2.3.2 未知高度的塊級(jí)元素

當(dāng)垂直居中的元素的高度和寬度未知時(shí)，可以借助CSS3中的transform屬性向Y軸反向偏移50%的方法實(shí)現(xiàn)垂直居中。部分瀏覽器存在兼容性的問題。
核心代碼：

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

演示demo-9

3.水平垂直居中

3.1 未知寬高元素水平垂直居中

利用2D變換，在水平和垂直兩個(gè)方向都向反向平移寬高的一半，從而使元素水平垂直居中。核心代碼：

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

演示demo-10

3.2 利用flex布局

利用flex布局，其中justify-content 用于設(shè)置或檢索彈性盒子元素在主軸（橫軸）方向上的對(duì)齊方式；而align-items屬性定義flex子項(xiàng)在flex容器的當(dāng)前行的側(cè)軸（縱軸）方向上的對(duì)齊方式。
核心代碼：

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

演示demo-11

4.常見布局方法

html文檔：

<div class="parent">
  <div class="left"></div>
  <div class="middle"></div>
  <div class="right"></div>
</div>

4.1左列定寬，右列自適應(yīng)

html文檔：

<div class="parent">
  <div class="left"></div>
  <div class="right"></div>
</div>

核心css代碼:

.left{float:left;width:100px;}
.right{margin-left:100px;}

顯示效果如下圖所示：

4.2右列定寬，左列自適應(yīng)

核心css代碼：

.parent{background:red;height:100px;margin:0 auto;}
.left{background:green;margin-right:-100px;width:100%;float:left;}
.right{float:right;width:100px;background:blue;}

利用float+margin實(shí)現(xiàn)，顯示效果如下：

4.3兩列定寬，一列自適應(yīng)

html結(jié)構(gòu)：

<div class="parent">
   <div class="left"></div>
   <div class="middle"></div>
   <div class="right"></div>
</div>

核心css代碼：

.left,.center{float:left:width:200px;}
.right{margin-left:400px;}

利用float+margin實(shí)現(xiàn)，顯示效果如下：

4.4兩側(cè)定寬，中欄自適應(yīng)

核心css代碼：

.left{width：100px;float:left;}
.center{float:left;width:100%;margin-right:-200px;}
.right{width:100px;float:right;}

利用float+margin實(shí)現(xiàn)，顯示效果如下：

4.5一列不定寬，一列自適應(yīng)

核心css代碼：
利用float+overflow實(shí)現(xiàn):

.left{float:left;}
.right{overflow:hidden;}

利用flex實(shí)現(xiàn)

.parent{display:flex;}
.right{flex:1;}

顯示效果如下：