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

PHP中文网

Libérer： 2017-04-01 17:04:28

original

1500 Les gens l'ont consulté

第一种方法:

p.box{
weight:200px;
height:400px;
position:absolute;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-200px;
}

Copier après la connexion

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

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

第二种方法：

p.box{
weight:200px;
height:400px;
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}

Copier après la connexion

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

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

第三种方法

p.box{
weight:200px;
height:400px;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
}

Copier après la connexion

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

以上就是让一个元素垂直水平居中的三种方法的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！

Étiquettes associées：

元素，垂直，水平居中

source：php.cn

Article précédent：CSS中!important的作用 Article suivant：CSS之详解:active选择器

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur