CSS垂直水平居中多种方案实现

最新推荐文章于 2024-07-08 14:31:45 发布

simba爱睡觉

最新推荐文章于 2024-07-08 14:31:45 发布

阅读量239

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/DemoD/article/details/79220636

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

方案一缺点：嵌套层级深

将父级元素设置为display:table;

内层元素设置为display:table-cell;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{ box-sizing: border-box; }
        html,body{
            margin:0;
            padding:0;
            width:100%;
            height:100%;
        }
        .container{
            background:#ddd;
            width:100%;
            height:100%;
            /* 关键点 */
            display:table;
        }
        .box{
            /* 关键点 */
            display:table-cell;
            text-align: center;
            vertical-align: middle;
        }
        .cell{
            width:50%;
            height:300px;
            background:#e4393c;
            /* 关键点 */
            display:inline-block;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
            <p class="cell"></p>
        </div>
    </div>
</body>
</html>

方案二：缺点：只适用于宽高固定的情况

利用position：absolute;和margin:auto;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{ box-sizing: border-box; }
        html,body{
            margin:0;
            padding:0;
            width:100%;
            height:100%;
        }
        .container{
            background:#ddd;
            width:100%;
            height:100%;
        }
        .box{
            background:#e4393c;
            width:50%;
            height:300px;
            /* 关键点 */
            position:absolute;
            left:0;
            right:0;
            top:0;
            bottom:0;
            margin:auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
        </div>
    </div>
</body>
</html>

方案三：缺点：低版本ie不支持

利用display:flex;

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{ box-sizing: border-box; }
        html,body{
            margin:0;
            padding:0;
            width:100%;
            height:100%;
        }
        .container{
            background:#ddd;
            width:100%;
            height:100%;
            /* 关键点 */
            display:flex;
        }
        .box{
            background:#e4393c;
            width:50%;
            height:300px;
            /* 关键点 */
            margin:auto;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
        </div>
    </div>
</body>
</html>

方案4：

利用position：absolute;和transform:translate();

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{ box-sizing: border-box; }
        html,body{
            margin:0;
            padding:0;
            width:100%;
            height:100%;
        }
        .container{
            background:#ddd;
            width:100%;
            height:100%;
            /* 关键点 */
            position:relative;
        }
        .box{
            background:#e4393c;
            width:50%;
            height:300px;
            /* 关键点 */
            position:absolute;
            left:50%;
            top:50%;
            -moz-transform:translate(-50%,-50%);
            -ms-transform:translate(-50%,-50%);
            -o-transform:translate(-50%,-50%);
            -webkit-transform:translate(-50%,-50%);
            transform:translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="box">
        </div>
    </div>
</body>
</html>

simba爱睡觉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS垂直水平居中多种方案实现

方案一缺点：嵌套层级深将父级元素设置为display:table; 内层元素设置为display:table-cell; Document *{ box-sizing: border-box; } html,body{ margin:0; paddi
复制链接

扫一扫