CSS Tips------未知寬度高度居中對齊<三種最優解決方案>

前言

不管是pc仍是移動端開發,咱們常常會遇到,這樣一個問題:父元素內包裹子元素,而子元素的寬度是未知的,如何讓子元素,左右居中呢?通過實戰演練,及資料搜索,感受如下三種方法是最優的解決方案,有須要的同窗能夠看看,相互交流,共同窗習.

---

0. 如下三種方案的主題html結構以下:

<div class="parent">
        <div class="child">
            子元素內容
        </div>
   </div>

1. flex佈局

第一種方案:使用CSS新特性,flex佈局,這種流式佈局方案在移動端上表現是很是棒的.將父元素display屬性設爲flex,而後align-atem居中,子元素不須要設置,看起來很是簡單.

.parent{
  width:600px;
  height:300px;
  background:red;
  display:flex; 
  justify-content: center; 
  align-items: center; 
}
.child{
  background:green; 
}

2. 定位+transform

第二種方案是根據定位和transform屬性來實現的.首先子元素對父元素絕對定位,使得子元素左上角水平豎直居中,由於子元素是未知的寬和高,因此將margin按自身的50%,向上向左移動便可,使用transform的translate屬性完美解決.

.parent{
  width:600px;
  height:300px;
  background:red;
  position:relative; 
}
.child{
  background:green;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

3. text-align+inline-block

第三種方案是根據inline-block的屬性來實現的,對於該水平居中方法可能不須要太多的介紹，全部主流瀏覽器均支持 text-align 屬性，只須要取值 center 便可；代碼比較簡單,可是對於inline-block形成的間距問題對複雜佈局會有影響.

.parent{
 width:600px;
  height:300px;
  background:red;
  text-align:center; 
}
.child{
  background:green;  
  display:inline-block;
}

其實還有一些使用浮動的方案,以及display:table的方案也是能夠實現的,只是我的以爲上述三種方法仍是應用比較多的,前端開發的過程,兼容性問題是繞不過去的坎,多總結總結找到本身的解決方案纔是最重要的.