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

資訊專欄INFORMATION COLUMN

豎直居中方式總結

WilsonLiu95 / 3255人閱讀

摘要：已知有將元素豎直居中于窗口中部絕對定位法對未知高度的元素適用。行排布法作用于非表格內聯塊元素時，是控制元素本身在當前行的豎直位置。豎直書寫模式法如果將書寫模式改為豎直，就變為豎直居中。

已知有

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 設置百分比值時使用的是父元素的寬度而非高度。

絕對定位法 2

只適用于固定高度的內部元素。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 作用于非表格內聯（塊）元素時，是控制元素本身在當前行的豎直位置。記得把父元素的字號設置為 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 就變為豎直居中。
對未知高度的元素適用。jsfiddle

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

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

類似的，將書寫模式改為豎直，塊元素就變為獨占一列，margin: auto 0 就會生效。
需要固定內部元素高度。jsfiddle

body {
  writing-mode: vertical-lr;
}

#child {
  margin: auto 0;
}

如有遺漏歡迎補充 ;)

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51183.html

相關文章

  • 豎直居中方式總結

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

    Charles 評論0 收藏0

  • 水平、垂直居中方式總結

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

    陸斌 評論0 收藏0

  • css 實現豎直居中的 N 種場景及 N 種方法

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

    rozbo 評論0 收藏0

  • HTML基礎總結

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

    Jacendfeng 評論0 收藏0

發表評論

0條評論

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