幾種可以讓元素水平垂直置中的方法

標籤：

1.負margin法:這是比較常用的方法，在知道元素的寬高的前提下才能使用

 1 <div id="a"></div> 2  3 #a{ 4    height:300px; 5   width:300px; 6   position:absolute; 7   top:50%; 8   left:50%; 9   margin-left:-150px;10   margin-top:-150px;11 }

   註：負margin是個非常有意思的用法，深入瞭解後會發現他在布局上相當有用。
  優點：代碼量少，相容性好。
  缺點：非響應式方法，內容可能會超出容器。

2.transform法：

<div id="a"></div>#a{     width: 50%;    height: 20%;    background: green;    position: absolute;    top:50%;    left: 50%;    transform:translate(-50%, -50%);        -webkit-transform:translate(-50%, -50%);        -ms-transform:translate(-50%, -50%);}

  優點：代碼量少；寬高可變，相應式布局
  缺點：不支援IE8，可能需要帶供應商首碼

3.Flexbox法

<div class="vertical-container">    <div class="a"></div></div>.vertical-container {  height: 300px;  width: 300px;  background: #ccc;  display: -webkit-flex;  display: flex;  -webkit-align-items: center;              align-items: center;  -webkit-justify-content: center;              justify-content: center;}.a{   width: 200px;   height: 200px;   background: green;}

註：Flexbox的用法遠不止如此，在布局上還有很多有趣的用法。

4.“完全水平垂直置中”：必須要設定元素的高度，圖片自身有高度的可以不設。

<div id="a"></div>#a{      width: 200px;    height: 200px;    background: red;    margin:auto;    position: absolute;    top:0;left:0;right: 0;bottom: 0;}

優點：代碼量少，相容性好

 

最後一種方法，我真的是才知道的，請原諒我真的很菜，請原諒我真的很沒見識，這種幾年前就被大家用爛糊了的方法我居然現在才知道，o(︶︿︶)o ！

幾種可以讓元素水平垂直置中的方法