元素居中

CSS元素居中技巧

最新推荐文章于 2024-09-20 14:39:18 发布

weixin_34361881

最新推荐文章于 2024-09-20 14:39:18 发布

阅读量55

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sq45711478/p/6643940.html

本文介绍了使用CSS实现不同类型的HTML元素水平及垂直居中的多种方法，包括行内元素、块级元素的居中处理，适合网页布局设计人员参考。

一、行内元素水平居中

　　text-align: center;

二、行内元素垂直居中

　　height: 40px;line-height: 40px; 让这两个值相等

三、块级元素水平居中

width: 300px; margin: 0 auto; 可以不设置高度

三、块级元素垂直居中

　　1.固定宽高块级元素垂直居中

    div{ width: 200px;
height: 100px;
line-height: 100px;
border: 1px solid #000;
text-align: center;
position: absolute;
left: 50%;
top: 50%;
        margin-left: -100px;
margin-top: -50px;
    }   

　　2.宽高是百分比的块级元素垂直居中

div{
       width: 10%;
height: 30%;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;   <br>}    

　　3.宽高不固定的块级元素垂直居中

div{
      
transform: translate(-50%,-50%);/*此时的百分数是以自身的宽高为参考*/
/*width: 1500px;
 
height: 300px;*/
 
/*width: 300px;*/
 
width: 30%;
 
height: auto;