已知有
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: 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;
}
如有遗漏欢迎补充 ;)