竖直居中方式总结

CarterLi

已知有

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

#child {
  width: 200px;
  height: 200px;
  background: black;
}
<div id="child"></div>

将元素 #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: centerjustify-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;
}

如有遗漏欢迎补充 ;)

阅读 1.6k

我大EOI前端
[链接] 虽然公司尚小,但是志向不小
1.3k 声望
99 粉丝
0 条评论
1.3k 声望
99 粉丝
文章目录
宣传栏