css 垂直居中方法总结 |css3 rotate3d旋转

css 删除json，css width 整个页面，css js的优化，带图片的列表css，图行在css怎么弄，css div随内容大小变化，css3 rotate3d旋转 css 垂直居中方法总结 |css3 rotate3d旋转

1. 使用 Flex 布局

.parent {
display: flex; /*使用Flex布局*/
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}

2. 使用绝对定位

.parent {
position: relative; /*相对定位*/
}
.child {
position: absolute; /*绝对定位*/
top: 50%; /*距离顶部50%*/
transform: translateY(-50%); /*向上移动自身高度的一半*/
}

3. 使用表格布局

.parent {
display: table; /*表格布局*/
width: 100%; /*设置宽度*/
height: 300px; /*设置高度*/
}
.child {
display: table-cell; /*表格单元格*/
vertical-align: middle; /*垂直居中对齐*/
text-align: center; /*水平居中对齐*/
}

总结：以上几种方法均可实现垂直居中的效果，具体应用时可根据实际情况选择。需要注意的是，每种方法都有其适用的场景，不同的布局方式在不同的情况下效果可能有所不同。