css實作元素的水平垂直居中，

（嘗試采用5W2H方法說明）：

別只看，請實操！！！

What：
1.這篇檔案主要描述元素水平方向居中的幾種最常見和最實用的幾種方式，并說明優缺點，
2.寫這篇文章的目的，是為了鞏固自己的知識，也分享給大家一起學習研究，歡迎大家指正和評論，

Why：
需要水平居中的原因，就是為了讓元素位于視覺中心突出重點，可視化布局的簡介明了，主題明確，提高用戶體驗度，

When：
我是星期六下午開始撰寫，一直到晚上12點，
對于你自己，如果你感覺自己對這些掌味訓不牢靠，請立刻！馬上！Now！開始動手嘗試起來，不然一開始就澆滅你的小火苗，讓你喪失了激情和男人該有的沖動，

Where：
學習的場所可以是anywhere；咖啡廳、家里、飯店、火車上（我就是在高鐵上碼的文章），不必拘泥場所，只要不冷能動手就做起來，

Who：
針對人員比如像我這種遺忘型、剛入門的初學者、以及在css懵懂程序中徘徊的你，大神請繞路或留個腳印踩踩也行，
我，一個大老爺們，沒啥好說的；你們，一群智商200+，給個支點就能撬動地球的你們，動動手指你們就全學會了，

How Long：
你要問我學懂這個大概多長時間，以大家高達200+趕超愛因斯坦的智商，說半天就能搞懂我都感覺是瞧不起大家，以各位看官的智商，半個小時，頂多半個小時，你就能掌握，
How：
請忽略以上的部分廢話，以下的怎么做才是重點：

行內元素居中方式：

   <div style="height:50px;border:1px solid red;">
        <label style="line-height:50px">單行文本label垂直居中：設定line-height為父級行高</label>
   </div>

水平垂直居中方式

方式一：Flex布局 [推薦]

優點：內容塊的高度任意，優雅的溢位，
缺點：IE8/IE9不支持，需要瀏覽器前綴，渲染可能會有問題，

    <div >
      <div style="width: 20px;">左</div>
      <div >flex布局垂直水平居中</div>
      <div style="width: 20px;">右</div>
    </div>

.hv_flex {
  display: flex;
  width: 600px;
  height: 100px;
  border: 1px solid red;
  justify-content: center;
  align-content: center;  /*  多行是垂直居中,垂直沒有邊距 */
  align-items: stretch; /*  stretch讓盒子內的每個元素的高度都等于行高 */
}
.hv_flexChild {
  flex: 1;
  border: 2px solid green;
  left: 10px;
  right: 10px;
}

方式二：after偽元素實作水平垂直居中 [推薦]

優點：兼容所有游覽器

<div >
        <div >after偽元素實作水平垂直居中</div>
</div>

.parent {
  border: 2px solid blue;
  text-align: center;
  height: 100px;
  width: 600px;
  /* overflow: hidden; */
}

.parent::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  /* width: 100%; */
}

.son {
  display: inline-block;
  vertical-align: middle;
  border: 1px solid red;
  /* width: 100%; */
}

方式三：left:0;right:0;top:0;bottom:0;margin:auto;

優點:簡單
缺點:沒有足夠空間時, 子元素會被截斷, 但不會有滾動條.

  <div >
      <div >
        方式一：left:0;right:0;top:0;bottom:0;margin:auto;
      </div>
    </div>
.hv_parent {
  position: relative;
  width: 600px;
  height: 180px;
  border: 1px solid red;
}

.hv_child1 {
  border: 2px solid green;
  position: absolute;
  /* height: 40px; */
  /* width: 400px; */
  left: 10px;
  right: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
}

方式四：left: 50%;top: 50%;transform: translate(-50%, -50%); [推薦]

優點:代碼量少
缺點:IE8不支持, 屬性需要追加瀏覽器廠商前綴, 可能干擾其他 transform 效果, 某些情形下會出現文本或元素邊界渲染模糊的現象.

    <div >
      <div >
        方式二：left: 50%;top: 50%;transform: translate(-50%, -50%);
      </div>
    </div>

.hv_parent {
  position: relative;
  width: 600px;
  height: 180px;
  border: 1px solid red;
}
.hv_child2 {
  border: 2px solid blue;
  /* margin-left:50%; */
  /* margin-top: 50%; */
  width: 400px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

方式五：height:固定;width:固定;left:50%;top:50%;margin-top:-0.5height;margin-left:- 0.5width;

優點: 適用于所有瀏覽器.
缺點: 父元素空間不夠時, 子元素可能不可見(當瀏覽器視窗縮小時,滾動條不出現時).如果子元素設定了overflow:auto, 則高度不夠時, 會出現滾動條.

    <div >
      <div >
        方式三：height:固定;width:固定;left:50%;top:50%;margin-top:-0.5*height;margin-left:- 0.5*width;
      </div>
    </div>

結后語：
兄dei,實操吧！
不然做起來只看感覺都看懂了，一關閉我的文章就：嗯？水平居中都哪幾種方式來著？再次打開看了之后回想：嗯？水平居中這幾種方式都會有什么問題或優缺點？
看的時候都會以為看懂了：這不是很簡單嗎？
做的時候都突然感覺自己是個麻瓜：我去！這么簡單怎么布局就不對呢？哪影響了？調好之后，咦~，怎么突然就好了呢？
所以，

別只看，請實操！！！

標籤：Html/Css

上一篇：一些實用的Django+HTML設定

下一篇：深入了解CSS中盒子模型