[web前端学习笔记]定位的盒子居中显示

最新推荐文章于 2024-09-06 17:09:21 发布

什么都只会一点点

最新推荐文章于 2024-09-06 17:09:21 发布

阅读量6k

点赞数 1

分类专栏： Web前端-学习自己文章标签： web前端前端盒子居中绝对定位

本文链接：https://blog.csdn.net/qq_36172443/article/details/77233491

版权

Web前端-学习自己专栏收录该内容

1 篇文章 0 订阅

订阅专栏

哎,好久没接触前端,现在都要重新开始学习了,今天我们来讲如何对定位的盒子居中显示.

大家都知道对盒子居中显示有一个万金油的方法就是 margin: 0 auto;

但对于那只适用于没有脱离文档流的元素,用过定位的元素是不适用的

今天我就来讲一下对定位盒子也试用的方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>居中测试</title>
    </head>
    <style type="text/css">
        .box{
            width: 100%;
            height: 500px;
            position: relative;
background-color: aqua;
            }
            .test{
                width: 400px;
                height: 100px;
                position: absolute;
                background-color: black;    
                /*下面两句核心代码*/
                left: 50%;  
                /*margin-left:只需要为该盒子的50%的宽度即可*/
                margin-left: -200px;

            }
    </style>
    <body>
        <div class=" box">
            <div class="test">

            </div>
        </div>
    </body>
</html>

原理如下
这里写图片描述

这里写图片描述

现有一种用css3实现的方法

    .test{
                width: 400px;
                height: 100px;
                position: absolute;
                background-color: black;    
                left: 50%;
                /*把margin-left: -200px;改成这个效果一样*/
                transform: translate(50%);
            }