CSS3實(shí)現(xiàn)水平居中、垂直居中、水平垂直居中的實(shí)例代碼

發(fā)布時(shí)間：2020-02-27 14:58:25 作者：Mr_Ma

我要評(píng)論

在前端面試中經(jīng)常會(huì)遇到css居中效果的實(shí)現(xiàn)，今天小編給大家分享幾種css垂直水平居中的方法，通過(guò)實(shí)例代碼給大家講解，需要的朋友參考下吧

作為一個(gè)前端小猴子，不管是面試的時(shí)候還是工作中，我們都會(huì)或多或少的遇到“使用css居中”的效果，今天就寫(xiě)一篇關(guān)于css垂直水平居中的幾種方法。

栗子1：從最簡(jiǎn)單的水平居中開(kāi)始

margin: 0 auto;

塊級(jí)元素使用margin: 0 auto;可以在父元素的中間位置居中，不過(guò)要記得設(shè)置塊級(jí)元素的寬高。 HTML部分

<div class="wrap">
  <div class="example1">
    <p>CSS</p>
  </div>
</div>

CSS部分

.example1 {
  width: 200px;
  height: 200px;
  background-color: orange;
}
.example1 p {
  width: 100px;
  height: 100px;
  background-color: red;
  margin: 0 auto;
  line-height: 100px;
  text-align: center;
}

栗子2：元素水平垂直居中

position 元素已知寬度絕對(duì)定位+margin反向偏移

.wrap { position: relative; background-color: orange; width: 300px; height: 300px; } .example2 { background-color: red; width: 100px; height: 100px; position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -50px; }

position transform 元素未知寬度如果元素未知寬度，只需將上面 example2 中的 margin: -50px 0 0 -50px ;替換為： transform: translate(-50%,-50%) ;

栗子3： flex布局

HTML同上面，附 css 代碼

.warp {
  background-color: #FF8C00;
  width: 200px;
  height: 200px;
  display: flex;
  justify-content: center; /*使子項(xiàng)目水平居中*/
  align-items: center; /*使子項(xiàng)目垂直居中*/
}
.example3 {
  background-color: #F00;
  width: 100px;
  height: 100px;
}

另外一種就是 table-cell布局了,這個(gè)我就不介紹了，因?yàn)椴幌虢榻B。

栗子4：絕對(duì)布局

div使用絕對(duì)布局，設(shè)置margin:auto;并設(shè)置top、left、right、bottom的值相等即可，不一定要都是0。 HTML部分

<div class="warp">
  <div class="example3">
    居中顯示
  </div>
</div>

CSS部分

.warp {
  position: relative;
  background-color: orange;
  width: 200px;
  height: 200px;
}
.example3 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: red;
  width: 100px;
  height: 100px;
  margin: auto;
}

栗子5：給子元素相對(duì)定位，在通過(guò)translaY（）得到垂直居中

.warp {
  position: relative;
  background-color: orange;
  width: 200px;
  height: 200px;
}
.example3 {
  position: relative;
  top:50%;
  transform:translateY(-50%);
  background-color: red;
  width: 100px;
  height: 100px;
  margin: 0 auto;
}

栗子6：利用inline-block的vertical-align: middle去對(duì)齊after偽元素

利用inline-block的vertical-align:middle去對(duì)齊after偽元素實(shí)現(xiàn)效果更加好，居中塊的尺寸可以做包裹性、自適應(yīng)內(nèi)容，兼容性也相當(dāng)好。缺點(diǎn)是水平居中需要考慮inline-block間隔中的留白（代碼換行符遺留問(wèn)題。）

.warp {
    text-align: center;
    overflow: auto;
    width: 200px;
    height: 200px;
    background-color: orange;
}
.example3 {
    display: inline-block;
    background-color: red;
    vertical-align: middle;
    width: 100px;
    height: 100px;
}

.warp:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    margin-left: -0.25em;
    /* To offset spacing. May vary by font */
}

栗子7：display: flex-box

flexbox布局。此乃布局終極大法，專(zhuān)治各種布局定位難題！優(yōu)點(diǎn)：能解決各種排列布局問(wèn)題.

.warp {
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  background-color: orange;
}
 
.example3 {
  width: 100px;
  height: 100px;
  background-color: red;
}

圖片居中的栗子1：

<div class="warp">
  <div class="example3">
    <img src="xxxx" alt="">
  </div>
</div>
.warp {
  width: 200px;
  height: 200px;
  background-color: orange;
  display: flex;
  align-items: center;
  justify-content: center;
}
.example3 img {
  width: 100px;
  height: 100px;
  background-color: blue;
}