CSS面试题-如何实现绝对居中

最新推荐文章于 2024-06-23 15:09:49 发布

ExMaterial

最新推荐文章于 2024-06-23 15:09:49 发布

阅读量112

点赞数 1

分类专栏：面试准备文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_49172439/article/details/125761137

版权

面试准备专栏收录该内容

18 篇文章 1 订阅

订阅专栏

1-8、绝对居中

1-8.1、什么是绝对居中（水平垂直居中）？

内外两个盒子，内侧盒子相对外侧盒子水平垂直方向都居中。
在这里插入图片描述

1-8.2、如何实现绝对居中（水平垂直居中）？

定宽高

绝对定位+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>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            position: relative;
            margin: 200px auto; /* 这是为了在浏览器中方便观察，不是必要的 */
            width: 400px;
            height: 400px;
            background-color: pink;
        }

        .son {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -50px;
            margin-top: -50px;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            I'm the son
        </div>
    </div>
</body>
</html>

绝对定位+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>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            position: relative;
            margin: 200px auto; /* 这是为了在浏览器中方便观察，不是必要的 */
            width: 400px;
            height: 400px;
            background-color: pink;
        }

        .son {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            I'm the son
        </div>
    </div>
</body>
</html>

不定宽高

绝对定位+transform

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            position: relative;
            margin: 200px auto; /* 这是为了在浏览器中方便观察，不是必要的 */
            width: 400px;
            height: 400px;
            background-color: pink;
        }

        .son {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            I'm the son
        </div>
    </div>
</body>
</html>

table-cell

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            display: table-cell;
            vertical-align: middle;
            text-align: center;
            width: 400px;
            height: 400px;
            background-color: pink;
        }

        .son {
            display: inline-block;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            I'm the son
        </div>
    </div>
</body>
</html>

flex布局

<!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>
        * {
            margin: 0;
            padding: 0;
        }

        .father {
            display: flex;
            margin: 200px auto; /* 这是为了在浏览器中方便观察，不是必要的 */
            width: 400px;
            height: 400px;
            justify-content: center;
            align-items: center;
            background-color: pink;
        }

        .son {
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">
            I'm the son
        </div>
    </div>
</body>
</html>