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

Posted lvqiupingboke-2019

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了两种方式实现盒子水平垂直居中相关的知识,希望对你有一定的参考价值。

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

<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%);

以上是关于两种方式实现盒子水平垂直居中的主要内容,如果未能解决你的问题,请参考以下文章

盒子在浏览器中水平垂直居中

div盒子水平垂直居中的方法

div盒子水平垂直居中的方法

CSS一个盒子在另一个盒子水平垂直居中

div盒子水平垂直居中的方法推荐

0060 translatemargin 实现绝对定位的盒子 水平居中垂直居中