css实现垂直水平居中的六种方法

爱学前端的大学森

已于 2023-04-21 21:44:39 修改

阅读量5.3k

点赞数 4

文章标签： html css 前端

于 2023-04-20 19:23:56 首次发布

本文链接：https://blog.csdn.net/weixin_67720880/article/details/130273745

版权

第一种定位方法

<!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>
        .box1 {
            background-color: #bfa;
            width: 500px;
            height: 500px;
            position: relative;
        }

        .box2 {
            background-color: red;
            width: 100px;
            height: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            //修改外边距。往回平移半个子盒子的高度和宽度
            margin-left: -50px;
            margin-top: -50px;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

</html>

第二种 margin：auto方法

<!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>
        .box1{
            background-color: #bfa;
            width: 500px;
            height: 500px;
            position: relative;
        }
        .box2{
            background-color: red;
            width: 100px;
            height: 100px;
            position:absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

第三种 display：table-cell方法

<!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>
        .box1{
            background-color: #bfa;
            width: 500px;
            height: 500px;
            display: table-cell;
            //把此元素放置在父元素水平的中部。
            vertical-align: middle;
            //垂直居中
            text-align: center;
           
        }
        .box2{
            background-color: red;
            width: 100px;
            height: 100px;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>
</html>

vertical-align 属性设置一个元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

第四种 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>
        .box1 {
            background-color: #bfa;
            width: 500px;
            height: 500px;
            display: flex;
            //主轴居中
            justify-content: center;
            //辅轴居中
            align-items: center;
            
        }

        .box2 {
            background-color: red;
            width: 100px;
            height: 100px;
          
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

</html>

第五种手动计算

<!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>
        .box1 {
            background-color: #bfa;
            width: 500px;
            height: 500px;
            
        }

        .box2 {
            background-color: red;
            width: 100px;
            height: 100px;
            margin-left: 200px;
            margin-top: 200px;
            
        }
        .box1::before{
            content: "";
            display:table;
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

</html>

*第六种 translate方法

<!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>
        .box1 {
            background-color: #bfa;
            width: 500px;
            height: 500px;
           position: relative;
        }

        .box2 {
            background-color: red;
            width: 100px;
            height: 100px;
          position: absolute;
          top: 50%;
          left: 50%;
          //往回平移半个子盒子的高度和宽度
          transform: translate(-50%,-50%);
        }
    </style>
</head>

<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

</html>

这是我总结出来的六种方法，大家还知道什么方法呢，评论区留言吧！

爱学前端的大学森

关注

4
点赞
踩
17

收藏

觉得还不错? 一键收藏
1
评论
css实现垂直水平居中的六种方法

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。vertical-align 属性设置一个元素的垂直对齐方式。
复制链接

扫一扫