不定寬高元素的水平垂直居中

看風景就發表於2016-10-11

1. table-cell方法

/*父元素*/
{display:table-cell;vertical-align:middle;text-align:center}
/*子元素*/
{vertical-align: middle;display:inline-block}

2. transform方法

/*父元素*/
{position:relative}
/*子元素*/
{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

3. flex方法

/*父元素*/
{display:flex;justify-content:center;align-items:center;}

 

相關文章