两种方式实现盒子水平垂直居中

标签：col   size   width   垂直   red   margin   font   add   position   

一：在知道宽高的情况下：

<div style="

width:200px;

height:200px;

background: red;

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

"></div>

二：在不知道宽高的情况下：padding会把盒子撑开，相当于宽高了。

<div style="

padding: 30px;

background: pink;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%，-50%）；

"></div>

另外：可以加几个兼容：

两种方式实现盒子水平垂直居中

标签：col   size   width   垂直   red   margin   font   add   position   

原文地址：https://www.cnblogs.com/lvqiupingboke-2019/p/12055720.html