让一个不定宽高的DIV，垂直水平居中

最新推荐文章于 2022-05-18 21:49:22 发布

1planet

最新推荐文章于 2022-05-18 21:49:22 发布

阅读量234

点赞数

文章标签： html css css3 html5

本文链接：https://blog.csdn.net/qq_42239440/article/details/107203792

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 法一:使用CSS方法：
        父盒子设置：宽高 display:table-cell；text-align:center；vertical-align:middle；
        Div设置：display:inline-block；vertical-align:middle； */
        
        .father {
            width: 600px;
            height: 500px;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            background-color: red;
        }
        
        .son {
            width: 200px;
            height: 200px;
            background-color: bisque;
            display: inline-block;
            vertical-align: middle;
        }
        /* 法二:使用CSS3 transform：
        父盒子设置：display:relative 宽 高
        Div设置：transform:translate（-50%，-50%）；position:absolute；top：50%；left：50%; */
        
        .father1 {
            width: 500px;
            height: 500px;
            background-color: rgb(151, 132, 21);
            position: relative;
        }
        
        .son1 {
            width: 100px;
            height: 50px;
            position: absolute;
            /* left: 50%;
            margin-left: -50px;
            top: 50%;
            margin-top: -25px; */
            /* 移动到父盒子的左侧50% */
            top: 50%;
            /* 移动到父盒子的下侧50% */
            left: 50%;
            /* 移动自身的左右各50% */
            transform: translate(-50%, -50%);
            background-color: rgb(55, 93, 163);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">son</div>
    </div>
    <div class="father1">
        <div class="son1">son</div>
    </div>
</body>

</html>

1planet

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
让一个不定宽高的DIV，垂直水平居中

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 法一:使用CSS方法： .
复制链接

扫一扫