七種水平垂直置中的css排版

[LeoWangJ]

兩個div元素，parent代表父層，child代表子層

<div id="parent">
  <div id="child">
  </div>
</div>

預設的css

body{
  height:300px;
}
#child{
  background-color:#111;
  width:50px;
  height:50px;

}
#parent{
  height:100%;
  background-color:#d5d7de;
}

1. flex水平垂直置中

#parent{
   display:flex;
   justify-content:center;
  align-items:center;

2. 已知父層寬高的情況下,父層設relative，子層設置absolute/fixed,並且將top,left設成50%
   位子已經取得到中心點，但中心點的位子是子層的左上角。
   所以必須移動子層寬高的一半，才會是置中。使用margin-top/left去調整位子。
   ex:子層寬高各為50px; 所以需要將元素移動25px

   
   #parent{
   position:relative;
   width:300px;
   }

child{

position:absolute; top:50%; left:50%; margin-top:-25px; margin-left:-25px; }