CSS 实现居中

1.利用margin实现盒子居中

　　利用margin设置左右外边距为auto实现盒子居中显示：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <style>
 8         .box {
 9             width: 200px;
10             height: 200px;
11             border: 1px solid #000;
12             margin: 0 auto;
13         }
14     </style>
15 </head>
16 <body>
17     <div class="box"></div>
18 </body>
19 </html>

　　最终实现结果如下：

 

 2.利用position的absolute实现居中

　　利用position的absolute实现居中，其实也是需要margin的配合实现的。基本原理是绝对定位left: 50%，此时是盒子的左边框与父盒子的中线对齐，因此我们需要使盒子往左边走百分之五十自身一半的距离，如下：

　　

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <style>
 8         .box {
 9             width: 200px;
10             height: 200px;
11             border: 1px solid #000;
12             position: absolute;
13             left: 50%;
14             margin-left: -100px;
15         }
16     </style>
17 </head>
18 <body>
19     <div class="box"></div>
20 </body>
21 </html>

　　最终实现结果如下：

 

 

3.利用CSS3的transform：translate 实现居中

　　其实本质上跟第二种方法差不多，同样是先通过绝对定位使盒子距离父盒子左边框百分之五十，此时的盒子左边框同样是与父盒子的中线对齐，然后利用transform的translateX让盒子左移动盒子宽度的一半。值得注意的是，margin的时候我们写的是盒子自身宽度一半的值，这是因为如果写百分比对比的是父盒子，而在transform中可以直接写百分比，因为translate百分比对比的是自身宽度。如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid #000;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

　　最终实现结果如下：

 

posted @ 2020-07-25 17:05  littleppig  阅读(176)  评论(0)  编辑  收藏  举报