垂直居中的div有多少种?
时间:2023-03-30 18:17:12
CSS
方法一对齐项目:居中;宽度:300px;高度:300px;边框:1px实心#ccc;}.box{宽度:100px;高度:100px;背景:红色;300像素;高度:300px;边框:1px实心#ccc;}.box{位置:绝对;顶部:50%;边距顶部:-50px;宽度:100px;高度:100px;背景:红色;{位置:相对;宽度:300px;高度:300px;边框:1px实心#ccc;}.box{位置:绝对;顶部:0;底部:0;保证金:自动;宽度:100px;红色的;}方法4.wrap{position:relative;宽度:300px;高度:300px;边框:1px实心#ccc;}.box{位置:绝对;顶部:50%;变换:翻译Y(-50%);宽度:100像素;高度:100px;背景:红色;}方法2-4分别实现了相对定位和绝对定位,但是方法略有不同方法5table-cell和vertical-alignimplementation.wrap{display:table-cell;垂直对齐:中间;宽度:300px;高度:300px;边框:1px实心#ccc;}.box{宽度:100px;高度:100px;背景:红色;