CSS水平垂直居中

先來一個盒盒（要操做它嘛）

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

水平垂直居中

方式一：Flex佈局 [推薦]
優勢：內容塊的高度任意，優雅的溢出。
缺點：IE8/IE9不支持，須要瀏覽器前綴，渲染可能會有問題。

    <div class="hv_flex">
      <div style="width: 20px;">左</div>
      <div class="hv_flexChild">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 class="parent">
        <div class="son">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 class="hv_parent">
      <div class="hv_child1">
        方式一：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 class="hv_parent">
      <div class="hv_child2">
        方式二：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 class="hv_parent">
      <div class="hv_child3">
        方式三：height:固定;width:固定;left:50%;top:50%;margin-top:-0.5*height;margin-left:- 0.5*width;
      </div>
    </div>

 

 

參考文獻

[1] (https://louiszhai.github.io/2016/03/12/css-center/)