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

資訊專欄INFORMATION COLUMN

豎直居中方式總結(jié)

WilsonLiu95 / 3262人閱讀

摘要：已知有將元素豎直居中于窗口中部絕對定位法對未知高度的元素適用。行排布法作用于非表格內(nèi)聯(lián)塊元素時，是控制元素本身在當(dāng)前行的豎直位置。豎直書寫模式法如果將書寫模式改為豎直，就變?yōu)樨Q直居中。

已知有

html, body {
  margin: 0;
  height: 100%;
}

#child {
  width: 200px;
  height: 200px;
  background: black;
}

將元素 #child 豎直居中于窗口中部

絕對定位法 1

對未知高度的元素適用。jsfiddle

#child {
  position: absolute; /* fixed */
  top: 50%;
  transform: translateY(-50%);
}

注意此法中的 top: 50% 不能以 margin-top: 50% 代替。因為給 margin-top 設(shè)置百分比值時使用的是父元素的寬度而非高度。

絕對定位法 2

只適用于固定高度的內(nèi)部元素。jsfiddle

#child {
  position: absolute; /* fixed */
  top: 0;
  bottom: 0;
  margin: auto 0;
}
表格布局法

vertical-align 作用于表格元素時，會對表格中的元素起作用。
對未知高度的元素適用。jsfiddle

html {
  display: table;
}

body {
  display: table-cell;
  vertical-align: middle;
}
行排布法

vertical-align 作用于非表格內(nèi)聯(lián)（塊）元素時，是控制元素本身在當(dāng)前行的豎直位置。記得把父元素的字號設(shè)置為 0。
對未知高度的子元素適用，但是要已知父元素高度。jsfiddle

body {
  font-size: 0;
  line-height: 100vh;
}

#child {
  display: inline-block;
  vertical-align: middle;
}
伸縮盒法 1

簡單粗暴的方法，不需要管子元素按行還是按列排列。
對未知高度的元素適用。jsfiddle

body {
  display: flex;
}

#child {
  margin: auto 0;
}
伸縮盒法 2

注意對于不同的排列方式 flex-direction 選擇不同的 CSS 屬性 align-items: center 或 justify-content: center。好處是 autoprefix 后兼容舊版 flexbox 語法。
對未知高度的元素適用。jsfiddle

body {
  display: flex;
  align-items: center;
}
豎直書寫模式法 1

如果將書寫模式改為豎直，text-align 就變?yōu)樨Q直居中。
對未知高度的元素適用。jsfiddle

body {
  writing-mode: vertical-lr;
  text-align: center;
}

#child {
  display: inline-block;
}
豎直書寫模式法 2

類似的，將書寫模式改為豎直，塊元素就變?yōu)楠氄家涣校?b>margin: auto 0 就會生效。
需要固定內(nèi)部元素高度。jsfiddle

body {
  writing-mode: vertical-lr;
}

#child {
  margin: auto 0;
}

如有遺漏歡迎補充 ;)

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

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

相關(guān)文章

  • 豎直居中方式總結(jié)

    摘要：已知有將元素豎直居中于窗口中部絕對定位法對未知高度的元素適用。行排布法作用于非表格內(nèi)聯(lián)塊元素時，是控制元素本身在當(dāng)前行的豎直位置。豎直書寫模式法如果將書寫模式改為豎直，就變?yōu)樨Q直居中。 已知有 html, body { margin: 0; height: 100%; } #child { width: 200px; height: 200px; backgrou...

    Charles 評論0 收藏0

  • 水平、垂直居中方式總結(jié)

    摘要：我們在實際工作中經(jīng)常會遇到需要水平居中或者垂直居中的場景，今天我們就來看一下如何設(shè)置水平居中和垂直居中。水平居中行內(nèi)元素。不定寬塊狀元素水平居中我們來學(xué)習(xí)一下這種方法。 我們在實際工作中經(jīng)常會遇到需要水平居中或者垂直居中的場景，今天我們就來看一下如何設(shè)置水平居中和垂直居中。 水平居中 行內(nèi)元素。 如果被設(shè)置元素為文本、圖片等行內(nèi)元素時，水平居中是通過給父元素設(shè)置text-align:c...

    陸斌 評論0 收藏0

  • css 實現(xiàn)豎直居中的 N 種場景及 N 種方法

    摘要：塊級元素豎直居中通常借助絕對定位和等手段，在已知或者未知塊級元素高度時，分別使用不同的方法。 剛開始工作的時候，css 里的豎直居中一直是個老大難問題。每次用到的時候都去網(wǎng)上搜，搜，搜，半天才搜到合適的解決方法。然后下次遇到，呃，又忘了~ 后來仔細回憶了一下，其實CSS實現(xiàn)豎直居中是有幾種不同的應(yīng)用場景的，需要分別使用不同的解決方法。這也是為啥每次都覺得，誒上次那個解決方法好像不行呢？...

    rozbo 評論0 收藏0

  • HTML基礎(chǔ)總結(jié)

    摘要：細化知識點總結(jié)標簽都是標題標簽，定義一段話的標題，最大，依次遞減，最小標題標簽的作用讓文本加粗顯示段落標簽標簽用來顯示一段文本圖片，它會忽略源代碼中的排版塊元素獨占一行的元素，和相鄰的元素不能共享同一行所有的塊元素都有屬性和元素都是HTML細化知識點總結(jié) 1.h1-h6標簽 都是標題標簽，定義一段話的標題，h1最大，依次遞減，h6最小 標題標簽的作用：讓文本加粗顯示 ? 2. 段落標簽：p...

    Jacendfeng 評論0 收藏0

發(fā)表評論

0條評論

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