亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

css垂直居中布局總結(jié)

lentoo / 1089人閱讀

摘要：簡(jiǎn)介總結(jié)記錄一下經(jīng)常需要用到垂直居中布局，歡迎補(bǔ)充空手套。。。

簡(jiǎn)介

總結(jié)記錄一下經(jīng)常需要用到垂直居中布局，歡迎補(bǔ)充(空手套。。。O(∩_∩)O)

以下栗子如果未特別標(biāo)注同一使用這樣的html結(jié)構(gòu)
垂直居中布局 利用絕對(duì)定位和負(fù)margin

絕對(duì)定位可以很容易做到top:50%，現(xiàn)在只要再讓目標(biāo)元素上移自身高度的一半就垂直居中了

.container {
  background: #777777;
  height: 400px;
  position: relative;
}

.container .content {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  margin-top: -50px;
  left: 50%;
  margin-left: -50px;
  background: #ee5f28;
}

優(yōu)點(diǎn)：兼容性好
缺點(diǎn)：需要知道居中元素的高度

利用絕對(duì)定位和transform 
 .container {
  background: #777777;
  height: 400px;
  position: relative;
}

.container .content {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  background: #ee5f28;
}

優(yōu)點(diǎn)：不需要考慮content元素的高度

缺點(diǎn)：兼容性

利用絕對(duì)定位和calc 
.container {
  background: #777777;
  height: 400px;
  position: relative;
}

.container .content {
  width: 100px;
  height: 100px;
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  background: #ee5f28;
}

優(yōu)點(diǎn)：相比于前面少了兩條樣式

缺點(diǎn)：兼容性

利用flex 
.container {
  background: #777777;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container .content {
  width: 100px;
  height: 100px;
  background: #ee5f28;
}
.container {
  background: #777777;
  height: 400px;
  display: flex;
}

.container .content {
  width: 100px;
  height: 100px;
  background: #ee5f28;
  margin: auto;
}

優(yōu)點(diǎn)：垂直居中特別容易搞定

缺點(diǎn)：兼容性

震驚absoulute（絕對(duì)定位）還可以這樣用 
.container {
  background: #777777;
  height: 400px;
  position: relative;
}

.container .content {
  width: 100px;
  height: 100px;
  background: #ee5f28;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

優(yōu)點(diǎn)：

1.跨瀏覽器，兼容性好（無(wú)需hack，可兼顧IE8~IE10）；

2.無(wú)特殊標(biāo)記，樣式更精簡(jiǎn)；

3.自適應(yīng)布局，可以使用百分比和最大最小高寬等樣式；

4.居中時(shí)不考慮元素的padding值（也不需要使用box-sizing樣式）；

5.布局塊可以自由調(diào)節(jié)大??；6.img的圖像也可以使用

6.瀏覽器支持：Chrome、Firefox、Safari、Mobile Safari、IE8-10。 “完全居中”經(jīng)測(cè)試可以完美地應(yīng)用在最新版本的Chrome、Firefox、Safari、Mobile Safari中，甚至也可以運(yùn)行在IE8~IE10上

使用inline-block 
.container {
  background: #777777;
  height: 400px;
  text-align: center;
  font-size: 0;
  overflow: auto;
}

.container::after {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.container .content {
  display: inline-block;
  vertical-align: middle;
  width: 100px;
  height: 100px;
  background: #ee5f28;
}

這里注意：容器‘container’里要設(shè)置font-size:0;避免inline-block之間產(chǎn)生間隔

優(yōu)點(diǎn)：

內(nèi)容高度可變

內(nèi)容溢出則能自動(dòng)撐開(kāi)父元素高度

瀏覽器兼容性好，甚至可以調(diào)整支持IE7

使用table與table-cell 




  
  
  
  Document

優(yōu)點(diǎn)：

內(nèi)容高度可變

內(nèi)容溢出則能自動(dòng)撐開(kāi)父元素高度

瀏覽器兼容性好

缺點(diǎn)：額外標(biāo)簽

參考資料

https://caniuse.com/

https://www.w3cplus.com/css3/...

http://blog.jobbole.com/46574/

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

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

相關(guān)文章

  • 前端-CSS3&H5

    摘要：高度模型淺識(shí)為的簡(jiǎn)寫(xiě)，簡(jiǎn)稱(chēng)為塊級(jí)格式化上下文，為瀏覽器渲染某一區(qū)域的機(jī)制，中只有和中還增加了和。并非所有的布局都會(huì)在開(kāi)發(fā)中使用，但是其中也會(huì)涉及一些知識(shí)點(diǎn)。然而在不同的純制作各種圖形純制作各種圖形多圖預(yù)警 一勞永逸的搞定 flex 布局 尋根溯源話(huà)布局 一切都始于這樣一個(gè)問(wèn)題：怎樣通過(guò) CSS 簡(jiǎn)單而優(yōu)雅的實(shí)現(xiàn)水平、垂直同時(shí)居中。記得剛開(kāi)始學(xué)習(xí) CSS 的時(shí)候，看到 float 屬性不...

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

  • css對(duì)齊方案總結(jié)

    摘要：核心代碼利用布局利用布局，其中用于設(shè)置或檢索彈性盒子元素在主軸橫軸方向上的對(duì)齊方式而屬性定義子項(xiàng)在容器的當(dāng)前行的側(cè)軸縱軸方向上的對(duì)齊方式。核心代碼相對(duì)于的水平垂直居中列表布局兼容性好核心代碼布局核心代碼css對(duì)齊方案總結(jié) 垂直居中 通用布局方式(內(nèi)斂元素和塊狀元素都適用) 利用flex:核心代碼: 12345 .container{ display:flex; ...

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

  • css table布局大法，解決你大部分居中、多列等高、左右布局的問(wèn)題

    摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應(yīng)布局 左邊右邊定寬中間自適應(yīng)三列布局 最...

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

  • css table布局大法，解決你大部分居中、多列等高、左右布局的問(wèn)題

    摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應(yīng)布局 左邊右邊定寬中間自適應(yīng)三列布局 最...

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

  • css table布局大法，解決你大部分居中、多列等高、左右布局的問(wèn)題

    摘要：基于這樣的布局方式，你就可以把什么定高不定高定寬不定寬多行單行的水平垂直居中都搞定了。且不支持這就是所謂的布局大法。 看了這篇文章，你可以了解到以下布局方法： table-cell 定高水平垂直居中 不定高水平垂直居中 單行定高水平垂直居中 單行不定高水平垂直居中 多行定高水平垂直居中 多行不定高水平垂直居中 多列等高布局 左邊定寬右邊自適應(yīng)布局 左邊右邊定寬中間自適應(yīng)三列布局 最...

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

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

0條評(píng)論

閱讀需要支付1元查看
<