面试 - css未知宽高的五种水平垂直布局方法

问题描述

问 题

携程面试题如题，我百度过并且实战可行的方法有
1:display:flex;justify-content:centent;align-item:center
2.position:absolute,top:0,right:0,left:0,bottom:0,margin:auto;
3:positiom:absolute;top:50%,left:50%,transfrom:translate(-50%,-50%)
4.父元素：display:table-cell;width:300px;height:300px;text-align:center;vertical-align:middle;
子元素：display:inline-block;
求大家告知另外一种方法，或者更多

解决方案

可以利用伪元素

parent{
    text-align: center;
    }
parent:before{
    content:'\200B'; /*零宽空格*/
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    }
child{
    display: inline-block;
    vertical-align: middle;
    }

这篇关于面试 - css未知宽高的五种水平垂直布局方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！