垂直居中方法总结

使元素#child在窗口中间垂直居中。绝对定位方法1适用于未知高度的元素。jsfiddle#child{位置：绝对；/*固定*/top:50%;transform:translateY(-50%);}注意这个方法中的top:50%不能用margin-top:50%代替。因为margin-top在设置百分比值的时候使用的是父元素的宽度而不是高度。绝对定位2仅适用于固定高度的内部元素。jsfiddle#child{位置：绝对；/*固定*/top:0;底部：0；margin:auto0;}当表格布局方法vertical-align作用于表格元素时，它会作用于表格中的元素。适用于未知高度的元素。jsfiddlehtml{显示：表格；}正文{显示：表格单元格；vertical-align:middle;}当行排列方法vertical-align作用于非表格行内（块）元素时，控制元素本身在当前行直位置的垂直对齐方式。记得将父元素的字体大小设置为0。适用于未知高度的子元素，但必须知道父元素的高度。jsfiddlebody{字体大小：0；行高：100vh；}#child{显示：内联块；vertical-align:middle;}拉伸框方法1简单粗暴的方法，不需要按行或列排列管道元素。适用于未知高度的元素。jsfiddlebody{display:flex;}#child{margin:auto0;}拉伸框方法2注意对于不同的排列flex-direction选择不同的CSS属性align-items:center或者justify-content:center。优点是autoprefix兼容旧的flexbox语法。适用于未知高度的元素。jsfiddlebody{显示：flex；align-items:center;}垂直书写模式方法1如果将书写模式改为垂直，text-align变为垂直居中。适用于未知高度的元素。jsfiddlebody{写作模式：vertical-lr;text-align:center;}#child{display:inline-block;}垂直书写模式方法二类似，将书写模式改为垂直，块元素变为独占一列，margin:auto0生效。内部元素高度需要固定。jsfiddlebody{writing-mode:vertical-lr;}#child{margin:auto0;}如有遗漏，欢迎补充；）