CSS垂直水平居中的幾種方法

做爲一個前端小猴子，無論是面試的時候仍是工做中，咱們都會或多或少的遇到「使用css居中」的效果，今天就寫一篇關於css垂直水平居中的幾種方法。

栗子1：從最簡單的水平居中開始

margin: 0 auto;
複製代碼

塊級元素使用margin: 0 auto;能夠在父元素的中間位置居中，不過要記得設置塊級元素的寬高。 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：元素水平垂直居中

1. position 元素已知寬度 絕對定位+margin反向偏移

<div class="wrap">
    <div class="example2">
    </div>
</div>
複製代碼

.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;
}
複製代碼

2. 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; /*使子項目水平居中*/
  align-items: center; /*使子項目垂直居中*/
}
.example3 {
  background-color: #F00;
  width: 100px;
  height: 100px;
}
複製代碼

另一種就是 table-cell佈局了,這個我就不介紹了，由於不想介紹。

栗子4： 絕對佈局

div使用絕對佈局，設置margin:auto;並設置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：給子元素相對定位，在經過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去對齊after僞元素

利用inline-block的vertical-align:middle去對齊after僞元素實現效果更加好，居中塊的尺寸能夠作包裹性、自適應內容，兼容性也至關好。缺點是水平居中須要考慮inline-block間隔中的留白（代碼換行符遺留問題。）

.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佈局。此乃佈局終極大法，專治各類佈局定位難題！優勢：能解決各類排列布局問題.

.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;
}
複製代碼

圖片居中的栗子2：

.warp {
  width: 200px;
  height: 200px;
  background-color: orange;
  line-height: 200px;
    text-align: center;
}
.example3 img {
  width: 100px;
  height: 100px;
  background-color: blue;
  vertical-align: middle;
}
複製代碼

就寫到這裏了，後續在遇到的話會繼續添加的。。

若是小夥伴有別的寫法，能夠在評論區留言，我會一一回復的。

動動你的小手，關注一下我的訂閱號，不定時推送前端乾貨，和你在學習前進的道路上，一同披荊斬棘，我與你同在。