CSS Tips------未知寬度高度居中對(duì)齊<三種最優(yōu)解決方案>

big_cat 發(fā)布于2019-08-29 11:19 / 1431人閱讀

摘要：前言無(wú)論是還是移動(dòng)端開(kāi)發(fā)我們經(jīng)常會(huì)遇到這樣一個(gè)問(wèn)題父元素內(nèi)包裹子元素而子元素的寬度是未知的如何讓子元素左右居中呢經(jīng)過(guò)實(shí)戰(zhàn)演練及資料搜索感覺(jué)以下三種方法是最優(yōu)的解決方案有需要的同學(xué)可以看看相互交流共同學(xué)習(xí)以下三種方案的主題結(jié)構(gòu)如下子元素內(nèi)容布

前言

無(wú)論是pc還是移動(dòng)端開(kāi)發(fā),我們經(jīng)常會(huì)遇到,這樣一個(gè)問(wèn)題:父元素內(nèi)包裹子元素,而子元素的寬度是未知的,如何讓子元素,左右居中呢?經(jīng)過(guò)實(shí)戰(zhàn)演練,及資料搜索,感覺(jué)以下三種方法是最優(yōu)的解決方案,有需要的同學(xué)可以看看,相互交流,共同學(xué)習(xí).

0. 以下三種方案的主題html結(jié)構(gòu)如下:

   
        
            子元素內(nèi)容

1. flex布局

 第一種方案:使用CSS新特性,flex布局,這種流式布局方案在移動(dòng)端上表現(xiàn)是非常棒的.將父元素display屬性設(shè)為flex,然后align-atem居中,子元素不需要設(shè)置,看起來(lái)非常簡(jiǎn)單.

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

2. 定位+transform

第二種方案是根據(jù)定位和transform屬性來(lái)實(shí)現(xiàn)的.首先子元素對(duì)父元素絕對(duì)定位,使得子元素左上角水平豎直居中,因?yàn)樽釉厥俏粗膶捄透?所以將margin按自身的50%,向上向左移動(dòng)即可,使用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

第三種方案是根據(jù)inline-block的屬性來(lái)實(shí)現(xiàn)的,對(duì)于該水平居中方法可能不需要太多的介紹，所有主流瀏覽器均支持 text-align 屬性，只需要取值 center 即可；代碼比較簡(jiǎn)單,但是對(duì)于inline-block造成的間距問(wèn)題對(duì)復(fù)雜布局會(huì)有影響.

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

其實(shí)還有一些使用浮動(dòng)的方案,以及display:table的方案也是可以實(shí)現(xiàn)的,只是個(gè)人覺(jué)得上述三種方法還是應(yīng)用比較多的,前端開(kāi)發(fā)的過(guò)程,兼容性問(wèn)題是繞不過(guò)去的坎,多總結(jié)總結(jié)找到自己的解決方案才是最重要的.