纯CSS实现垂直居中的几种方法
时间：2023-03-30 17:01:35
CSS
垂直居中是布局中非常常见的效果之一。为了实现良好的兼容性，PC端垂直居中的方式一般是通过绝对定位、table-cell、负边距方式。有了css3，移动端的垂直居中更加多样化。方法一：table-cellhtmlstructure:verticallycentered
css:.box1{display:table-cell;垂直对齐：中间；文本对齐：居中；}方法二：display:flex.box2{display:flex;证明内容：居中；align-items:Center;}方法三：绝对定位和负边距.box3{position:relative;}.box3span{position:absolute;宽度：100px；高度：50px；顶部：50%；左：50%；左边距：-50px；边距顶部：-25px；文本对齐：居中；}方法四：绝对定位和0.box4span{width:50%;高度：50%；背景：#000；溢出：自动；保证金：自动；位置：绝对；顶部：0；左：0；底部：0；右：0；}这个第一种方法和上面有点类似，不过这里是通过设置margin:auto和top,left,right,bottom为0来实现居中的，很神奇。但是这里要确定内部元素的高度，可以使用百分比，比较适合移动端。方法五：translate.box6span{position:absolute;顶部：50%；左：50%；宽度：100%；变换：翻译（-50%，-50%）；文本对齐：居中；}这其实是方法3的一种变形，移位是通过translate实现的。
