css篇-前端面試中常問(wèn)的div居中方法

上又要到秋招的時(shí)候了，又有不少人打算換工作了。前端在面試中總會(huì)被問(wèn)到的一道基礎(chǔ)題div居中方法，這里給大家總結(jié)一下都有哪些常用的方法。

絕對(duì)定位

父級(jí)元素（parent）采用相對(duì)定位（relative），需要居中的元素（demo）采用絕對(duì)定位（absolute）。
居中元素向上偏移50%，向左偏移50%，此時(shí)左頂點(diǎn)位于中心，不過(guò)我們需要的是整體居中，所以在偏移自身一半的寬高。（如下圖）

還未偏移一半自身寬高

<style>
    .parent {
      position: relative;
      width: 500px;
      height: 500px;
      border: solid red 1px;
    }
    .demo {
      position: absolute;
      width: 100px;
      height: 100px;
      border: solid blue 1px;
      top: 50%;
      left: 50%;
      margin-top: -50px;
      margin-left: -50px;
    }
  </style>
  <body>
    <div class="parent">
      <div class="demo"></div>
    </div>
  </body>

彈性方法居中

通過(guò)flex彈性布局設(shè)置垂直居中和水平居中

  <style>
    .parent {
      width: 500px;
      height: 500px;
      border: solid red 1px;
      display: flex;
      // 垂直，水平居中
      align-items: center;
      justify-content: center;
    }
    .demo {
      width: 100px;
      height: 100px;
      border: solid blue 1px;
    }
  </style>
  <body>
    <div class="parent">
      <div class="demo"></div>
    </div>
  </body>

使用transform居中

在子元素不知道自身寬高情況，使用transform進(jìn)行比偏移。

  <style>
    .parent {
      position: relative;
      width: 500px;
      height: 500px;
      border: solid red 1px;
    }
    .demo {
      position: absolute;
      border: solid blue 1px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
  <body>
    <div class="parent">
      <div class="demo">居中</div>
    </div>
  </body>

以上3種是常用的方法，當(dāng)然還有其他居中方法比如grid布局，table-cell布局等。

. 元素高度聲明的情況下在父容器中居中：絕對(duì)居中法

<div class="parent">
 <div class="absolute-center"></div>
</div>
.parent {
 position: relative;
}
.absolute-center {
 position: absolute;
 margin: auto;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 height: 70%;
 width: 70%;
}
優(yōu)點(diǎn)：
1.跨瀏覽器，包括 IE8-10
2.無(wú)需其他冗余標(biāo)記，CSS 代碼量少
3.完美支持圖片居中
4.寬度高度可變，可用百分比
缺點(diǎn)：
1.必須聲明高度

2. 負(fù)外邊距：當(dāng)元素寬度高度為固定值時(shí)。設(shè)置 margin-top/margin-left 為寬度高度一半的相反數(shù)，top:50%;left:50%

<div class="parent">
 <div class="negative-margin-center"></div>
</div>
.parent {
 position: relative;
}
.negative-margin-center {
 position: absolute;
 left: 50%;
 top: 50%;
 margin-left: -150px;
 margin-top: -150px;
 height: 300px;
 width: 300px;
}
優(yōu)點(diǎn)：
良好的跨瀏覽器特性，兼容 IE6-7
代碼量少
缺點(diǎn)：
不能自適應(yīng)，不支持百分比尺寸和 min-/max-屬性設(shè)置
內(nèi)容可能溢出容器
邊距大小域與 padding，box-sizing 有關(guān)

3. CSS3 Transform 居中：

<div class="parent">
 <div class="transform-center"></div>
</div>
.parent {
 position: relative;
}
.transform-center {
 position: absolute;
 left: 50%;
 top: 50%;
 margin: auto;
 width: 50%;
 -webkit-transform: translate(-50%， -50%);
 -moz-transform: translate(-50%， -50%);
 transform: translate(-50%, -50%);
}
優(yōu)點(diǎn)：
內(nèi)容高度可變
代碼量少
缺點(diǎn)：
IE8 不支持
屬性需要瀏覽器廠商前綴
可能干擾其他 transform 效果

4. table-cell 居中：

法一

#wrap{ position:absolute; width:300px; height:200px; top:50%; left:50%; transform:translate(-50%,-50%) ; background:#009688; } 若是下面的代碼，其結(jié)果就是錯(cuò)誤的

#wrap{
 width:300px;
 height:200px;
 margin-top:50%;
 margin-left:50%;
 transform:translate(-50%,-50%) ;
 background:#009688;
 }

原因：

當(dāng)margin設(shè)置成百分?jǐn)?shù)的時(shí)候，其top right bottom left的值是參照父元素盒子的寬度進(jìn)行計(jì)算

方法二

直接用彈性盒布局，作用于父元素上實(shí)現(xiàn)

在線咨詢

上一篇：怎么實(shí)現(xiàn)WEB端上傳超大文件
下一篇：用jsp:include指令動(dòng)態(tài)加載文件

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

css篇-前端面試中常問(wèn)的div居中方法

絕對(duì)定位

彈性方法居中

使用transform居中

您的項(xiàng)目需求