首页 > 技术文章 > 两种方式实现盒子水平垂直居中

lvqiupingboke-2019 2019-12-17 17:29 原文

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

<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>

另外:可以加几个兼容:

-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);

推荐阅读