国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

水平且垂直居中方法（10種）

zgbgx / 2171人閱讀

摘要：前言水平且垂直居中方法有哪些這在實(shí)際工作中經(jīng)常用到，小記一下。以下結(jié)合水平居中強(qiáng)調(diào)實(shí)現(xiàn)垂直居中。子級元素是內(nèi)聯(lián)元素，父級元素設(shè)置屬性垂直居中。

前言

水平且垂直居中方法有哪些？這在實(shí)際工作中經(jīng)常用到，小記一下。

演示HTML結(jié)構(gòu) 

  

    

      i

基本思想

一般的，水平居中相對垂直居中簡單很多，對于內(nèi)聯(lián)元素（inline、inline-block、inline-table和inline-flex），父級元素設(shè)置text-align: center;；對于塊級元素，子級元素設(shè)置margin: 0 auto;。以下結(jié)合水平居中強(qiáng)調(diào)實(shí)現(xiàn)垂直居中。

1、已知父級元素寬高，父級元素定位非 static ，子級元素定位設(shè)為 position: absolute/fixed ，再利用 margin 、 left 和 top 屬性居中。 
#div1 {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: #ffff00;
}

#div2 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
  background-color: #ff00ff;
}

注：需要已知父級元素固定寬高，才能確定 margin-left 和 margin-right 。

2、子級元素是內(nèi)聯(lián)元素，父級元素設(shè)置 line-height 屬性垂直居中。 
#div1 {
  width: 200px;
  height: 200px;
  line-height: 120px;
  text-align: center;
  position: relative;
  background-color: #ffff00;
}

#div2 {
  width: 100px;
  height: 100px;
  line-height: normal;
  text-align: left;
  display: inline-block;
  background-color: #ff00ff;
}

注：需要已知父級元素的固定高度，才可以確定line-height。

3、子級元素是內(nèi)聯(lián)元素，父級元素用 display: table-cell; 和 vertical-align: middle; 屬性實(shí)現(xiàn)垂直居中。 
#div1 {
  width: 200px;
  height: 200px;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  background-color: #ffff00;
}

#div2 {
  width: 100px;
  height: 100px;
  display: inline-block;
  background-color: #ff00ff;
}

注：無需要確定父級元素的寬高，inline-block 、 table-cell 不兼容ie67

看到還有一種方案，是借助偽元素 ::after 將容器撐高，實(shí)現(xiàn)內(nèi)聯(lián)元素垂直居中

#div1 {
  width: 200px;
  height: 200px;
  background-color: #ffff00;
  text-align: center;
}

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

#div2 {
  width: 100px;
  display: inline-block;
  background-color: #cccccc;
  vertical-align: middle;
}

缺點(diǎn)：較難以理解，只適用于一個(gè)子級內(nèi)聯(lián)元素（有多個(gè)子元素不適用）

4、對于子級是塊級元素，父級元素同樣用 display: table-cell; 和 vertical-align: middle; 屬性實(shí)現(xiàn)垂直居中，水平方向居中用 margin: 0 auto; 。 
#div1 {
  width: 200px;
  height: 200px;
  display: table-cell;
  vertical-align: middle;
  background-color: #ffff00;
}

#div2 {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: #ff00ff;
}

注：無需要確定父級元素的寬高，table-cell不兼容ie67

5、利用css3 translate 特性：位移是基于元素寬高的。 
#div1 {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: #ffff00;
}

#div2 {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #ff00ff;
}

注：無需要確定父級元素的寬高，translate屬性兼容IE9+

6、當(dāng)父級是浮動的，用 display: table-cell; 會失效，這時(shí)需要包三層，第一層 display: table;，第二層 display: table-cell; 第三次居中層 
#div1 {
  width: 200px;
  height: 200px;
  position: relative;
  display: table;
  background-color: #ffff00;
  float: left;
}

#div2 {
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
  /* text-align: center; */
  background-color: #cccccc;
}

#div3 {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  /* display: inline-block; */
  background-color: #ff00ff;
}

注：無需要確定父級元素的寬高，但HTML標(biāo)簽層數(shù)較多。

7、絕對定位加四邊定位為0，margin 為 auto。 
#div1 {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: #ffff00;
}

#div2 {
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  background-color: #cccccc;
}

注：無需要確定父級元素的寬高，但把定位屬性全用上了

8、利用flex布局 justify-content: center; 和 align-items: center; 屬性居中。 
#div1 {
  width: 200px;
  height: 200px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  background-color: #ffff00;
}

#div2 {
  width: 100px;
  height: 100px;
  background-color: #cccccc;
}

注：無需要確定父級元素的寬高，兼容IE10+

9、利用grid布局，劃分成3x3柵格，第二行第二列格子垂直水平居中 
#div1 {
  width: 200px;
  height: 200px;
  display: grid;
  background-color: #ffff00;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

#div2 {
  width: 100px;
  height: 100px;
  background-color: #cccccc;
  grid-row-start: 2;
  grid-column-start: 2;
}

注：無需要確定父級元素的寬高，兼容性Firefox 52, Safari 10.1, Chrome 57, Opera 44

10、利用flex或grid布局結(jié)合 margin: auto; 
#div1 {
  width: 200px;
  height: 200px;
  display: flex;
  /* display: grid; */
}

#div2 {
  width: 100px;
  height: 100px;
  margin: auto;
}

注：此方法最簡潔， 但是 flex/grid 存在兼容性問題

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

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/115718.html

相關(guān)文章

  • CSS元素（文本、圖片）水平垂直居中方法

    摘要：上下左右負(fù)偽元素父容器上設(shè)置用于設(shè)置為行內(nèi)元素的水平居中居中元素自身設(shè)置用于設(shè)置為塊級元素的水平居中元素寬度固定，且不能浮動絕對定位? 1、text-align:center; 2、margin:0 auto; 3、display:inline-block; + text-align:center; 4、position:relative; + float:left; 5、line-heig...

    wuyangnju 評論0 收藏0

  • CSS水平居中和垂直居中的若干方法

    摘要：居中分為水平居中和垂直居中，水平居中方式也較為常見和統(tǒng)一，垂直居中的方法就千奇百怪了。若把最后一行加上，即可同時(shí)實(shí)現(xiàn)水平和垂直居中。 博客原文地址：Claiyre的個(gè)人博客 https://claiyre.github.io/如需轉(zhuǎn)載，請?jiān)谖恼麻_頭注明原文地址不為繁華易匠心 從css入門就開始接觸，無所不在的，一直備受爭議的居中問題。css居中分為水平居中和垂直居中，水平居中方式也較為...

    hiyayiji 評論0 收藏0

  • 常見面試題—css實(shí)現(xiàn)垂直水平居中

    摘要：常見面試題實(shí)現(xiàn)垂直水平居中前言面試中常常被問到，如何使用來實(shí)現(xiàn)一個(gè)元素的垂直水平方向上居中，特別是筆試題的時(shí)候，這道題目的出現(xiàn)頻率還是比較高的，當(dāng)然，在我們的生活中，也常常會有垂直水平居中的需求。 常見面試題—css實(shí)現(xiàn)垂直水平居中 前言 面試中常常被問到，如何使用css來實(shí)現(xiàn)一個(gè)元素的垂直水平方向上居中，特別是筆試題的時(shí)候，這道題目的出現(xiàn)頻率還是比較高的，當(dāng)然，在我們的生活中，也常常...

    gougoujiang 評論0 收藏0

  • 初探flex布局

    摘要：一布局概述布局是一種較新盒子模型，在布局模型中，彈性容器的子元素的排布可以比較靈活，可以根據(jù)容器的大小自動擴(kuò)展或收縮其大小。下面我們來看用布局怎么解決這些問題。所以學(xué)會使用布局是非常有必要的。想詳細(xì)了解布局請點(diǎn)擊這里。 一 flex布局 1.1 flex概述 flex布局是一種較新CSS盒子模型，在flex布局模型中，彈性容器的子元素的排布可以比較靈活，可以根據(jù)容器的大小自動擴(kuò)展或收縮...

    Jeffrrey 評論0 收藏0

  • cssfloat布局以及其他小技巧

    摘要：如果里有多行，那么就把每一行的行高加起來算。姓名怎么和聯(lián)系方式對齊其他的方法直接用可以的，不過會受到字體的影響。字體一變，加的就會變。代碼解釋代碼如果是內(nèi)聯(lián)元素要被改變寬度的話，一定要先寫上。 css float 布局以及其他小技巧總結(jié) 這篇博文 前面四個(gè)部分是關(guān)于css 經(jīng)典布局 如果你已經(jīng)知道了 可以直接跳過看第六部分 css 的其他小技巧 1.0 左右居中布局 ...

    ISherry 評論0 收藏0

發(fā)表評論

0條評論

zgbgx

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<