css水平垂直居中的方法

平平无奇的猴

于 2023-03-04 11:07:54 发布

阅读量141

点赞数 3

分类专栏： css 文章标签： css 前端 html

本文链接：https://blog.csdn.net/2201_75442743/article/details/129316831

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.position+margin负值（宽高固定）

2.position+margin(固定宽高)

3.display:table-cell + vertical-align:middle(固定宽度)

4.position+transform（不需要固定宽高）

5.弹性盒子flex（不需要固定宽高）

公共的素材

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            width: 500px;
            height: 500px;
            border: 1px solid red;
            margin: 150px auto;
        }
        .item{
            width: 200px;
            height: 200px;
            background-color: cadetblue;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="item">平平无奇的猴</div>
    </div>
</body>
</html>

1.position+margin负值（宽高固定）

使用绝对定位，将item横向和纵向都移动50%，此时的参照点是在item的左上角

因为移动之前的参照点是在item的左上角的，并且item的宽和高为200px，所以需要将item向左和上移动100px才能水平垂直居中，所以这个时候就可以使用margin-top和margin-left;这个方法的缺点是需要自己去算绝对定位后需要移动的距离

此方法代码如下：

        .box{
            position: relative;
            width: 500px;
            height: 500px;
            border: 1px solid red;
            margin: 150px auto;
        }
        .item{
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -100px;
            margin-left: -100px;
            width: 200px;
            height: 200px;
            background-color: cadetblue;
        }

2.position+margin(固定宽高)

第一步还是使用绝对定位，将itme固定在上下左右都为0的位置，就是原地不动（注意：在这步之前需要确定item，也就是被定位的元素是否有自己宽高，否则此处的绝对定位就没有意义了，会将item的宽高拉伸到父盒子的宽高一样。）

第二步使用margin: auto;item就会自动水平垂直居中

这个方法的好处在于不需要像第一种那样去计算平移的长度

此方法代码如下：

        .box{
            position: relative;
            width: 500px;
            height: 500px;
            border: 1px solid red;
            margin: 150px auto;
        }
        .item{
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            width: 200px;
            height: 200px;
            background-color: cadetblue;
        }

3.display:table-cell + vertical-align:middle(固定宽度)

这个方法不常用，大家可以了解一下

display:table-cell是将元素作为一个表格单元格显示（此处会改变父级的位置）；vertical-align:middle是将子元素垂直对齐，放在父元素的中部。此时效果如下：

最后为了将子集居中，可以在子集上加上margin: auto;

最终代码如下：

        .box{
            display: table-cell;
            vertical-align: middle;
            width: 500px;
            height: 500px;
            border: 1px solid red;
            margin: 0 auto;
        }
        .item{
            margin: auto;
            width: 200px;
            height: 200px;
            background-color: cadetblue;
        }

4.position+transform（不需要固定宽高）

此方法是我们在实战中运用的比较多的一种。

一开始还是用绝对定位，以父级为参照物，给子集添加left: 50%;top: 50%;此时是和第一种方法的第一步是一样的了，这个两个方法的区别在于第二部，是运用css3的transform将子集居中的： transform:translate(-50%, -50%)，这种方法的好处在于可以不设置宽高，也能垂直水平居中。

最终代码如下：

        .box{
            position: relative;
            width: 500px;
            height: 500px;
            border: 1px solid red;
            margin: 0 auto;
        }
        .item{
            position: absolute;
            left: 50%;
            top: 50%;
            transform:translate(-50%, -50%);
            width: 200px;
            height: 200px;
            background-color: cadetblue;
        }

5.弹性盒子flex（不需要固定宽高）

弹性盒子是我们常用的布局方式

我们先给父级开始弹性盒子的特性display: flex;后面，我们呢就可以利用弹性和子的特性，分别设置主轴和辅轴的对齐方式，因为需要将子集水平垂直居中，所以两个轴都需要居中，所以最后给的是：justify-content: center; align-items: center;

如对弹性盒子不太熟悉，可以去菜鸟查看它的特性：弹性盒子

最终代码如下：

        .box{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 500px;
            height: 500px;
            border: 1px solid red;
            margin: 0 auto;
        }
        .item{
            width: 200px;
            height: 200px;
            background-color: cadetblue;
        }