成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

在我水了11種水平垂直居中方法之后，我終于明白了

levius / 951人閱讀

摘要：老生常談，水平垂直居中。為什么大家都愛水平垂直居中呢基本根據(jù)如上結(jié)構(gòu)，通過(guò)實(shí)現(xiàn)水平垂直居中。絕對(duì)定位利用父元素相對(duì)定位和子元素絕對(duì)定位進(jìn)行水平垂直居中。

老生常談，水平垂直居中。為什么大家都愛水平垂直居中呢？
基本HTML

根據(jù)如上結(jié)構(gòu)，通過(guò)css實(shí)現(xiàn)水平垂直居中。

絕對(duì)定位

利用父元素相對(duì)定位和子元素絕對(duì)定位進(jìn)行水平垂直居中。根據(jù)是否知道子元素寬高，使用數(shù)值或者百分比的方式進(jìn)行定位。

方法1 
.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  position: relative;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

通過(guò)設(shè)置四向?yàn)?和margin: auto實(shí)現(xiàn)。

方法2 
.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  position: relative;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -10px -25px;
}

通過(guò)設(shè)置left和top使child左上角位置移動(dòng)到中間，然后再移動(dòng)自身寬高一般使child中心至中間。

方法3 
.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  position: relative;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
方法4 
.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  position: relative;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-25px, -10px);
}
總結(jié)

這幾種方法使用了絕對(duì)定位，margin或者transform來(lái)使子元素水平垂直居中，根據(jù)是否知道具體寬高來(lái)使用margin或者transform。

彈性盒子 方法5 
.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  display: flex;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
  margin: auto;
}
方法6 
.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  display: flex;
  justify-content: center;
  align-items:center;
}
.child {
  width: 50px;
  height: 20px;
  background-color: red;
}
總結(jié)

這兩種使用了flex彈性盒子布局來(lái)實(shí)現(xiàn)，隨著瀏覽器兼容性的普及，彈性盒子也越來(lái)流行了。

table-cell 方法7 
.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  display: table-cell;
  text-align:center;
  vertical-align: middle;
}
.child {
  display:inline-block;
  width:50px;
  height:20px;
  background-color: red;
}

使用了table-cell以及行內(nèi)塊元素來(lái)實(shí)現(xiàn)

行內(nèi)元素 方法8 
.father {
  width: 100px;
  height: 100px;
  background-color: grey;
  text-align:center;
}
.child {
  display:inline-block;
  width:50px;
  height:20px;
  background-color: red;
  vertical-align: middle;
}
.father:after{
  content:"";
  width:0;
  height: 100%;
  display: inline-block;
  vertical-align: middle;
}

利用偽元素?fù)伍_高度垂直居中。

方法9 
.father {
  width: 100px;
  line-height: 100px;
  background-color: grey;
  text-align: center;
}
.child {
  display: inline-block;
  width: 50px;
  height: 20px;
  background-color: red;
  vertical-align: middle;
}

利用父元素line-height與inline-block子元素vertical-align垂直居中

相對(duì)定位 方法10

是不是有點(diǎn)疑惑為啥1、2、3都要用absolute來(lái)定位，用relative不行嗎？

答案是可以的。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/114491.html

相關(guān)文章

  • 使一個(gè)div垂直+水平居中的幾種方法

    摘要：前幾天去一家互聯(lián)網(wǎng)公司面試，面試官問(wèn)到了這個(gè)應(yīng)該算是比較簡(jiǎn)單的問(wèn)題，在我自認(rèn)為回答正確時(shí)，才知道這道題的答案有很多種，下面就讓我們一起來(lái)探討一下這個(gè)問(wèn)題思路絕對(duì)定位居中原始版這個(gè)是我回答出來(lái)的，也是被各位所熟知的一種方法，設(shè)外層相對(duì)定位，內(nèi) 前幾天去一家互聯(lián)網(wǎng)公司面試，面試官問(wèn)到了這個(gè)應(yīng)該算是比較簡(jiǎn)單的問(wèn)題，在我自認(rèn)為回答正確時(shí)，才知道這道題的答案有很多種，下面就讓我們一起來(lái)探討一下這...

    joyqi 評(píng)論0 收藏0

  • CSS之各種居中

    摘要：前言在我看來(lái)，入門的路上最煩人的就是的各種居中了。在我初學(xué)過(guò)程中，居中這個(gè)問(wèn)題經(jīng)常困擾到我。使用偽元素垂直居中這種方法的前提是要是行內(nèi)元素才能進(jìn)行居中。結(jié)語(yǔ)以上的方法基本上可以用完成各種情況的居中。 前言 在我看來(lái)，入門CSS的路上最煩人的就是CSS的各種居中了。在我初學(xué)CSS過(guò)程中，居中這個(gè)問(wèn)題經(jīng)常困擾到我。那為什么CSS的居中這么煩人呢？ 我認(rèn)為，這是因?yàn)镃SS的居中方法以及它的適...

    Labradors 評(píng)論0 收藏0

  • CSS之各種居中

    摘要：前言在我看來(lái)，入門的路上最煩人的就是的各種居中了。在我初學(xué)過(guò)程中，居中這個(gè)問(wèn)題經(jīng)常困擾到我。使用偽元素垂直居中這種方法的前提是要是行內(nèi)元素才能進(jìn)行居中。結(jié)語(yǔ)以上的方法基本上可以用完成各種情況的居中。 前言 在我看來(lái)，入門CSS的路上最煩人的就是CSS的各種居中了。在我初學(xué)CSS過(guò)程中，居中這個(gè)問(wèn)題經(jīng)常困擾到我。那為什么CSS的居中這么煩人呢？ 我認(rèn)為，這是因?yàn)镃SS的居中方法以及它的適...

    Taste 評(píng)論0 收藏0

  • CSS的居中方式

    摘要：這樣一來(lái)外部容器正好可以將內(nèi)容垂直的包裹住并且由于外部容器是浮動(dòng)的所以容器的寬度和內(nèi)層的寬度一致這樣可以做到完全自適應(yīng)的實(shí)現(xiàn)居中。 剛學(xué)習(xí)CSS的時(shí)候嘗試過(guò)幾種居中的方法,這些方法不需要借助JS手段,所寫的方法有一個(gè)原則,就是在不需要直接人為的設(shè)定好寬高計(jì)算后再實(shí)現(xiàn)居中,還有諸如table布局啊、行高設(shè)定、margin：auto之類的我就不寫了。 以下幾種方法針對(duì)不同的瀏覽器,經(jīng)過(guò)測(cè)...

    lushan 評(píng)論0 收藏0

  • 不定元素寬高用css實(shí)現(xiàn)內(nèi)容水平和垂直都居中

    摘要：在開發(fā)中經(jīng)常遇到這個(gè)問(wèn)題，即讓某個(gè)元素的內(nèi)容在水平和垂直方向上都居中，內(nèi)容不僅限于文字，可能是圖片或其他元素。這篇文章就來(lái)總結(jié)一下都有哪些方法可以實(shí)現(xiàn)水平和垂直都居中。表示這些元素將相對(duì)于本容器水平居中，也是同樣的道理垂直居中。 在開發(fā)中經(jīng)常遇到這個(gè)問(wèn)題，即讓某個(gè)元素的內(nèi)容在水平和垂直方向上都居中，內(nèi)容不僅限于文字，可能是圖片或其他元素。而且我們希望不要涉及寬度和高度，也就是說(shuō)，我們不...

    Chao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<