CSS 几种常用的水平垂直居中方式

最新推荐文章于 2024-11-09 19:20:14 发布

jieyucx

最新推荐文章于 2024-11-09 19:20:14 发布

阅读量75

点赞数

分类专栏：前端常用布局和注意事项文章标签： css css3 前端

本文链接：https://blog.csdn.net/jieyucx/article/details/128669784

版权

前端常用布局和注意事项专栏收录该内容

14 篇文章 0 订阅

订阅专栏

文章展示了使用CSS实现元素水平垂直居中的四种方法：1)使用flexbox的justify-content和align-items属性；2)绝对定位结合transform翻译；3)flexbox的margin:auto自动margins;4)绝对定位配合四个边距设置为0并使用automargin。

摘要由CSDN通过智能技术生成

水平垂直居中方式

在这里插入图片描述

方式一

<!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>

       .box {
            width: 300px;
            height: 200px;
            background: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box div{
            width:100px;
            height:100px;
            background:pink;
        } 

    </style>
</head>

<body>
    <div class="box">
        <div></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>

       .box {
            width: 300px;
            height: 200px;
            background: skyblue;
            position: relative;
        }
        .box div{
            width:200px;
            height:50px;
            background:pink;
            position: absolute;
            left:50%;
            top:50%;
            transform: translate(-50%,-50%);
        } 
       
    </style>
</head>

<body>
    <div class="box">
        <div></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>
         .box {
            width: 300px;
            height: 200px;
            background: skyblue;
            position: relative;
            display: flex;
        }
        .box div{
            width:200px;
            height:50px;
            background:pink;
            margin:auto;
        } 
       
    </style>
</head>

<body>
    <div class="box">
        <div></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>

        .box {
            width: 300px;
            height: 200px;
            background: skyblue;
            position: relative;
        }
        .box div{
            width:200px;
            height:50px;
            background:pink;
            position: absolute;
            left:0;
            top:0;
            right:0;
            bottom:0;
            margin:auto;
        }
    </style>
</head>

<body>
    <div class="box">
        <div></div>
    </div>
</body>

</html>