竖直居中方式总结

Charles 发布于2019-08-29 13:14 / 2798人阅读

摘要：已知有将元素竖直居中于窗口中部绝对定位法对未知高度的元素适用。行排布法作用于非表格内联块元素时，是控制元素本身在当前行的竖直位置。竖直书写模式法如果将书写模式改为竖直，就变为竖直居中。

已知有

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;
}

如有遗漏欢迎补充 ;)

GPU云服务器云服务器竖直 Android竖直跑马灯 html5竖直线年终总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112467.html

竖直居中方式总结

摘要：已知有将元素竖直居中于窗口中部绝对定位法对未知高度的元素适用。行排布法作用于非表格内联块元素时，是控制元素本身在当前行的竖直位置。竖直书写模式法如果将书写模式改为竖直，就变为竖直居中。已知有 html, body { margin: 0; height: 100%; } #child { width: 200px; height: 200px; backgrou...

WilsonLiu95 2019-08-01 17:30 评论0 收藏0
水平、垂直居中方式总结

摘要：我们在实际工作中经常会遇到需要水平居中或者垂直居中的场景，今天我们就来看一下如何设置水平居中和垂直居中。水平居中行内元素。不定宽块状元素水平居中我们来学习一下这种方法。我们在实际工作中经常会遇到需要水平居中或者垂直居中的场景，今天我们就来看一下如何设置水平居中和垂直居中。水平居中行内元素。如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:c...

陆斌 2019-08-30 12:49 评论0 收藏0
css 实现竖直居中的 N 种场景及 N 种方法

摘要：块级元素竖直居中通常借助绝对定位和等手段，在已知或者未知块级元素高度时，分别使用不同的方法。刚开始工作的时候，css 里的竖直居中一直是个老大难问题。每次用到的时候都去网上搜，搜，搜，半天才搜到合适的解决方法。然后下次遇到，呃，又忘了~ 后来仔细回忆了一下，其实CSS实现竖直居中是有几种不同的应用场景的，需要分别使用不同的解决方法。这也是为啥每次都觉得，诶上次那个解决方法好像不行呢？...

rozbo 2019-08-29 11:26 评论0 收藏0
HTML基础总结

摘要：细化知识点总结标签都是标题标签，定义一段话的标题，最大，依次递减，最小标题标签的作用让文本加粗显示段落标签标签用来显示一段文本图片，它会忽略源代码中的排版块元素独占一行的元素，和相邻的元素不能共享同一行所有的块元素都有属性和元素都是HTML细化知识点总结 1.h1-h6标签都是标题标签，定义一段话的标题，h1最大，依次递减，h6最小标题标签的作用：让文本加粗显示 2. 段落标签：p...

Jacendfeng 2019-04-23 11:54 评论0 收藏0