让一个元素垂直水平居中的三种方法

Posted 林思南

tags:

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

第一种方法:

div.box{

weight:200px;

height:400px;

<!--把元素变成定位元素-->

position:absolute;

<!--设置元素的定位位置,距离上、左都为50%-->

left:50%;

top:50%;

<!--设置元素的左外边距、上外边距为宽高的负1/2-->

margin-left:-100px;

margin-top:-200px;

}

*兼容性好;缺点:必须知道元素的宽高

-------------

第二种方法:

div.box{

weight:200px;

height:400px;

<!--把元素变成定位元素-->

position:absolute;

<!--设置元素的定位位置,距离上、左都为50%-->

left:50%;

top:50%;

<!--设置元素的相对于自身的偏移度为负50%(也就是元素自身尺寸的一半)-->

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

}

 

*这是css3里的样式;缺点:兼容性不好,只支持IE9+的浏览器

 

---------------

第三种方法

div.box{

weight:200px;

height:400px;

<!--把元素变成定位元素-->

position:absolute;

<!--设置元素的定位位置,距离上、下、左、右都为0-->

left:0;

right:0;

top:0;

bottom:0;

<!--设置元素的margin样式值为 auto-->

margin:auto;

}

 

*兼容性较好,缺点:不支持IE7以下的浏览器

以上是关于让一个元素垂直水平居中的三种方法的主要内容,如果未能解决你的问题,请参考以下文章

让一个div水平且垂直居中

如何让DIV水平和垂直居中

CSS实现垂直居中的7种方法

总结:前端开发中让元素水平垂直居中的方法

如何设置一个div中的文字水平垂直居中

让一个元素水平垂直居中的几种方法