关于水平居中，垂直居中的三种办法

最新推荐文章于 2023-09-30 13:11:25 发布

adley_function

最新推荐文章于 2023-09-30 13:11:25 发布

阅读量521

点赞数

文章标签： flex transform

本文链接：https://blog.youkuaiyun.com/adley_function/article/details/52099423

版权

本文介绍了三种不同的CSS技术来实现元素的水平垂直居中：使用Flex布局、定位position以及CSS3的transform属性。每种方法都有其适用场景和特点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：利用flex弹性盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 600px;
            height: 600px;
            background: #dcdcdc;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box p{
            width: 100px;
            height: 100px;
            background: #f00;
        }
    </style>
</head>
<body>
<div class="box">
    <p></p>
</div>
</body>
</html>

方法二：利用定位position

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 600px;
            height: 600px;
            background: #dcdcdc;
            position: relative;
        }
        .box p{
            width: 100px;
            height: 100px;
            background: #f00;
            position:absolute;
            left: 0;
            top: 0;
            left: 0;
            bottom: 0;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="box">
    <p></p>
</div>
</body>
</html>

方法三：利用css3的transform属性：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{width: 600px;height: 600px;background: #dcdcdc;}
        .box p{
            width: 100px;
            height: 100px;
            background: #f00;
            position: relative;
            top: 50%;
            transform: translateY(-50%);
            margin:0 auto;
        }
    </style>
</head>
<body>
<div class="box">
    <p></p>
</div>
</body>
</html>