CSS设置水平垂直居中

最新推荐文章于 2023-03-16 12:16:25 发布

Belle_Daisy

最新推荐文章于 2023-03-16 12:16:25 发布

阅读量96

点赞数 1

分类专栏：前端文章标签： css css3 html Powered by 金山文档

本文链接：https://blog.csdn.net/Belle_Daisy/article/details/129209851

版权

前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

水平垂直居中

1.flex布局

1.1

为父元素设置display:flex,这个父元素就成为了flex容器。可以对子元素进行空间分配。

1.2

在父元素中设置

justify-content:center;//水平居中

align-items:center;//垂直居中

2.grid布局

2.1

为父元素设置display:grid;

2.2

为子元素设置

justify-self:center;//水平居中

align-self:center;//垂直居中

3.绝对定位+transform

3.1

给子元素设置position:absolute;

给父元素设置position:relative;

//这样子子元素的位置就是相对于父元素而言的

3.2

给子元素设置

left:50%

top:50%

此时子元素的left和top的50%是相对于父元素而言的，是父元素的50%

刷新页面我们会发现，此时子元素的左上角是父元素的中心点

3.3

给子元素设置

tranform:translate(-50%,-50%);

这里设置的translate的50%是相对于自身子元素的，子元素自身想左移动50%,向移动50%

3.4

 <style>
        * {
            margin:0px;
            padding:0px;
        }
        .bigbox {
            width:500px;
            height:500px;
            background:rgb(134, 102, 210);
            position:relative;
        }
        .smallbox {
            width:100px;
            height:100px;
            background:yellow;
            /*想让这个小盒子在大盒子的中间*/
            /*relative是相对正常的位置，absolute是相对于非static的父元素。*/
            /*这里的小盒子是相对于大盒子而言的，所以为小盒子设置上absolute,为父元素大盒子设置relative*/
            position:absolute;
            left:50%;/*50%是相对于父元素而言的*/
            top:50%;
            /*而现在小盒子虽然偏移了，但是不在中间，此时子元素的左上角的位置刚好对应的是父元素的中心
            我们可以用transform来设置向左和向上一些，把子元素往左移动50%，往上移动50%
            这里translate的50%是针对子元素自身的宽度来定的，而上面的left的50%是相对于父元素的宽高来定的*/
            transform:translate(-50%,-50%);/*translate的第一二个参数都是-50%*/
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <div class="smallbox"></div>
    </div>
</body>

4.绝对定位+负margin

4.1

给子元素设置position:absolute;

给父元素设置position:relative;

//这样子子元素的位置就是相对于父元素而言的

4.2

给子元素设置

left:50%

top:50%

此时子元素的left和top的50%是相对于父元素而言的，是父元素的50%

刷新页面我们会发现，此时子元素的左上角是父元素的中心点

4.3

给子元素设置margin-top,margin-left.

这里设置的值是对子元素自身元素而言的，要移动自身元素的一半

<style>
        * {
            margin:0px;
            padding:0px;
        }
        .bigbox {
            width:500px;
            height:500px;
            background:rgb(134, 102, 210);
            position:relative;
        }
        .smallbox {
            width:100px;
            height:100px;
            background:yellow;
            position:absolute;
            left:50%;
            top:50%;
            margin-top:-50px;/*移动半个自身的高度*/
            margin-left:-50px;/*移动半个自身的宽度*/
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <div class="smallbox"></div>
    </div>
</body>

6.绝对定位+calc

6.1

在知道子元素的自身宽度和高度的前提下，设置

left:calc(50% - 子元素自身宽度的一半px);

top:calc(50% - 子元素自身高度的一半px);

注意：-一定要隔空格

6.2

<style>
        * {
            margin:0px;
            padding:0px;
        }
        .bigbox {
            width:500px;
            height:500px;
            background:rgb(134, 102, 210);
            position:relative;
        }
        .smallbox {
            width:100px;
            height:100px;
            background:yellow;
            position:absolute;
            left:calc(50% - 50px);
            top:calc(50% - 50px);
        }
    </style>
</head>
<body>
    <div class="bigbox">
        <div class="smallbox"></div>
    </div>
</body>