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

資訊專欄INFORMATION COLUMN

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

Charles / 2830人閱讀

摘要：已知有將元素豎直居中于窗口中部絕對定位法對未知高度的元素適用。行排布法作用于非表格內(nèi)聯(lián)塊元素時(shí)，是控制元素本身在當(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% 代替。因?yàn)榻o margin-top 設(shè)置百分比值時(shí)使用的是父元素的寬度而非高度。

絕對定位法 2

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

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

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

html {
  display: table;
}

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

vertical-align 作用于非表格內(nèi)聯(lián)（塊）元素時(shí)，是控制元素本身在當(dāng)前行的豎直位置。記得把父元素的字號(hào)設(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)楠?dú)占一列，margin: auto 0 就會(huì)生效。
需要固定內(nèi)部元素高度。jsfiddle

body {
  writing-mode: vertical-lr;
}

#child {
  margin: auto 0;
}

如有遺漏歡迎補(bǔ)充 ;)

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

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

相關(guān)文章

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

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

    WilsonLiu95 評論0 收藏0

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

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

    陸斌 評論0 收藏0

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

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

    rozbo 評論0 收藏0

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

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

    Jacendfeng 評論0 收藏0

發(fā)表評論

0條評論

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