CSS Tips——未知寬度高度居中對齊

醉前端發表於2019-02-16
CSS

前言

無論是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的方案也是可以實現的,只是個人覺得上述三種方法還是應用比較多的,前端開發的過程,相容性問題是繞不過去的坎,多總結總結找到自己的解決方案才是最重要的.

相關文章