沒錯，css居中就是如此的簡單！

寫在前面

css居中方案是一個老生常談的問題，主要包括水平居中和垂直居中，水平居中你們用的比較多，最經常使用的莫過於margin:0 auto方案了，而垂直居中，不少時候會讓不少新手頭疼。

經常使用居中方案（水平）

1. margin：0 auto解決方案 （水平居中）

適用於已經知道寬度，而且其父級寬度不爲0的元素水平居中。

<!-- html -->
<div class="parent">
    <div class="child">哈哈哈哈</div>
</div>
 
<!-- css -->
.parent {
    width:800px;
}
.child {
    width:20%;//也能夠是固定像素
    margin:0 auto;
}

<!-- more -->

2.利用text-align:center使行內元素水平居中(水平居中)

<!-- html -->
<div>
   <span >哈哈哈哈</span>
</div>


<!-- css -->
div {
    text-align:center
}

3.flex水平居中

<!-- html -->
<div class="parent">
    <div class="child">哈哈哈哈</div>
</div>

<!-- css -->
.parent {
    display:flex;
    justify-content:center
}

4.絕對定位利用負邊距居中(已知寬度)

<!-- html -->
<div class="parent">
    <div class="child">哈哈哈哈</div>
</div>

<!-- css -->
.parent {
    position:relative;
}
.child {
    width:500px;
    position: absolute;
}

5.絕對定位不知寬度居中，能夠利用css transform屬性，也能夠利用flex居中

<!-- html -->
<div class="parent">
    <div class="child">哈哈哈哈</div>
</div>

<!-- css -->
.parent {
    position:relative;
}
.child {
    position: absolute;
    left:50%;
    transform:translate(-50%);
}

垂直居中方案

1.不知寬高，兼容性很高的居中方案。

<!-- html -->
<div class="parent">
    <div class="child">哈哈哈哈</div>
</div>

<!-- css -->
.parent {
    position:relative;
}
.child {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

2.利用行高進行居中,行高和高度一致

<!-- html -->
<div class="parent">
    <div class="child">哈哈哈哈</div>
</div>

<!-- css -->
.parent {
    height:50px;
    line-height:50px;
}

3.flex方案

<!-- html -->
<div class="parent">
    <div class="child">哈哈哈哈</div>
</div>

<!-- css -->
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

4.transform方案

<!-- html -->
<div class="parent">
    <div class="child">哈哈哈哈</div>
</div>

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

5.已知父級高度，利用margin-top進行居中，該方案過於簡單，就不貼代碼了
6.絕對定位，使用負邊距居中

<!-- html -->
<div class="parent">
    <div class="child">哈哈哈哈</div>
</div>

<!-- css -->
.parent {
    position: relative;
}
.child {
  position: absolute;
  width:500px;
  height:500px;
  top: 50%;
  left: 50%;
  margin-top:-250px;
  margin-left:-250px;
}

1. 還有一種是利用table方案居中，我以爲這種方案可能過期了，想了解的話能夠本身百度一下

寫在最後

本文已經列出了大多狀況下均可以解決的居中方案，還有一些比較居中，例如浮動元素居中能夠參考絕對定位居中，若是不考慮兼容性的話，flex居中是最方便的方案，你們能夠自由的去根據實際狀況去選擇須要的方案