CSS經常使用的元素居中方法 CSS居中佈局總結

參考：CSS: 經常使用的元素居中方法

         CSS居中佈局總結

 

1.水平居中

（1）文本水平居中

 

text-align: center;

（2）塊級元素水平居中

①設置margin

margin: auto;

 

②display:inline-block+text-align:center

        .parent {
            width: 400px;
            height: 400px;
            background-color: aquamarine;
            text-align: center;
        }

        .child {
            width: 100px;
            height: 100px;
            background-color: #43ff26;
            display: inline-block;
        }

這樣能夠使一塊級元素擁有一些inline元素的特性。

③absolute+transform

.parent {position:relative;}
.child {position:absolute;left:50%;transform:translateX(-50%);}

④ flex+justify-content

.parent {
            width: 400px;
            height: 400px;
            background-color: aquamarine;
            display: flex;
            justify-content: center;
        }

 

 

2.垂直居中

（1）文本垂直居中

①設置line-height和父元素高度一致，只適合單行文本的狀況下。

（2）塊級元素垂直居中

①table-cell+vertical-align

  .parent {display:table-cell;vertical-align:middle;}

優勢：只需設置父節點，兼容性好

②absolute+transform

.parent {position:relative;}             .child{position:absolute;top:50%;transform:translateY(-50%);}

 

③ flex+align-items

.parent {display:flex;align-items:center;}

 

 

3.水平垂直居中

（1）文本元素

text-align:center+line-height

（2）塊級元素

①inline-block+text-align+table-cell+vertical-align

 .parent {text-align:center;display:table-cell;vertical-align:middle;}

 .child {display:inline-block;}

 

②absolute+transform

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

 

③flex+justify-content+align-items

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

④負margin(需精確計算長寬)

<div class="absolute_p1">
  <div class="absolute_c1"></div>
</div>

.absolute_p1 {
  position: relative;

  width: 200px; height: 200px;
}
.absolute_p1 .absolute_c1 {
  position: absolute; /* fixed 同理 */
  left: 50%;          top: 50%;

  width: 100px;       height: 100px;
  margin-left: -50px; margin-top: -50px;  /* 需根據寬高計算偏移量 */
}

• 原理: 經過定位使元素左上角居中，再經過偏移值margin調整使元素中心居中
• 缺點：高度寬度需事先知道，得經過其來計算負margin(好煩)

⑤定位實現居中(不需計算偏移值)

<div class="absolute_p2">
  <div class="absolute_c2"></div>
</div>

.absolute_p2 {
  position: relative;

  width: 200px; height: 200px;
}
.absolute_p2 .absolute_c2 {
  position: absolute; /* fixed 同理 */
  left: 0; top: 0; bottom: 0; right: 0; /* 定位爲 0 */

  width: 100px; height: 100px;
  margin: auto; /* 不用計算偏移量 */
}

原理: 原理我也不知道啊！估計定位都給0了，元素本身也不知道該去哪兒，只好待在原地不知所措...