设置元素水平垂直居中的四种方法

最新推荐文章于 2024-03-24 20:17:26 发布

qq_53789078

最新推荐文章于 2024-03-24 20:17:26 发布

阅读量178

点赞数

文章标签：前端 css3 html5

本文链接：https://blog.csdn.net/qq_53789078/article/details/121445648

版权

1.margin移动

<!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>
        *{
            padding: 0;
            margin: 0;
        }
        .d1{
            width: 300px;
            height: 300px;
            background-color: aqua;
            border:1px solid black; 
            margin: 0 auto;       
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 100px;          
        }
    </style>
</head>
<body>
    <div class="d1"> 
        <div class="son"></div>
    </div>  
</body>
</html>

2.父元素设置相对定位，子元素设置绝对定位，绝对定位top、left为50%,

在设置margin-left：-子元素宽度的一半px和margin-top:-子元素高度的一半px

<!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>
        *{
            padding: 0;
            margin: 0;
        }
        .d1{
            width: 300px;
            height: 300px;
            background-color: aqua;
            border:1px solid black;
            position: relative; 
            margin: 0 auto;       
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top:50%;
            left:50%;
            margin-top: -50px;          
            margin-left: -50px;          
        }
    </style>
</head>
<body>
    <div class="d1"> 
        <div class="son"></div>
    </div>  
</body>
</html>

3.父元素设置相对定位，子元素设置绝对定位，并且设置left、top、bottom、right为0，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>
        *{
            padding: 0;
            margin: 0;
        }
        .d1{
            width: 300px;
            height: 300px;
            background-color: aqua;
            border:1px solid black;
            position: relative; 
            margin: 0 auto;       
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top:0;
            right: 0;
            bottom: 0;
            left:0;
            margin: auto;          
        }
    </style>
</head>
<body>
    <div class="d1"> 
        <div class="son"></div>
    </div>  
</body>
</html>

4.给父元素设置display:flex，且align-items:center;justify-content:center;

<!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>
        *{
            padding: 0;
            margin: 0;
        }
        .d1{
            width: 300px;
            height: 300px;
            background-color: aqua;
            border:1px solid black;
            margin: 0 auto;  
            display: flex;
            justify-content: center;
            align-items: center;     
        }
        .son{
            width: 100px;
            height: 100px;
            background-color: pink;          
        }
    </style>
</head>
<body>
    <div class="d1"> 
        <div class="son"></div>
    </div>  
</body>
</html>