sitemap
知识分享网:一个值得你收藏的网站!
当前位置:网站首页 > Html > 让一个元素垂直水平居中的三种方法

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

作者:xuhongji发布时间:2020-09-13分类:Html浏览:59评论:0


导读:第一种方法:p.box{weight:200px;height:400px;position:absolute;left:50%;top:50...
第一种方法:

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

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

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

第二种方法:

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

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

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

第三种方法

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

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

以上就是让一个元素垂直水平居中的三种方法的内容,更多相关内容请关注PHP中文网(www.cuteur.cn)!


欢迎 发表评论:

Html排行
«   2021年1月   »
123
45678910
11121314151617
18192021222324
25262728293031
标签列表
网站分类
文章归档
最近发表
推荐文章