【css基础】不定宽高的盒子实现垂直水平居中

最新推荐文章于 2023-12-28 14:01:48 发布

原创最新推荐文章于 2023-12-28 14:01:48 发布 · 629 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #css3 #flex

面试题专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了四种CSS实现元素居中的方法：1) 使用margin绝对定位实现居中，适合子元素不超过父元素的情况；2) 利用transform结合absolute定位实现居中，适用于子元素大于父元素；3) 通过display: table-cell实现文字和图片的垂直居中；4) 使用flex布局轻松实现双向居中。这些方法覆盖了不同场景下的居中需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

注意：这里给子盒子添加宽高属性是为了直观显示，实际上子盒子的宽高是不会影响到居中效果的

1. 脱离文档流，使用margin实现居中（这种方法子盒子大小是不能超过父盒子的）

<!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>
        .father {
            position: relative;
            width: 800px;
            height: 400px;
            background-color: aqua;
        }

        .son {
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            width: 200px;
            height: 150px;
            margin: auto;
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
    </script>
</body>
</html>

2. 脱离文档流，使用transform实现居中（即使子盒子尺寸大于父盒子也可以实现居中，transform是css3属性）

<!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>
        .father {
            position: relative;
            width: 800px;
            height: 400px;
            background-color: aqua;
        }

        .son {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 200px;
            height: 150px;
            margin: auto;
            background-color: bisque;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
    </script>
</body>
</html>

3. 使用table-cell实现居中（ie8+支持，只能实现文字或者图片的垂直居中，不能实现块级元素的垂直居中）

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        display: table-cell;
        width: 800px;
        height: 400px;
        background-color: aqua;
        text-align: center;
        vertical-align: middle;
    }

    img {
        height: 200px;
        /* 设置下面这个值是为了让文字和图片居中对齐 */
        vertical-align: middle;
    }
</style>

<body>
    <div>
        cewvwuei
        <img src="C:\Users\Administrator\Desktop\约瑟夫\images\6.jpg" alt="约瑟夫紫皮月下绅士"></div>
</body>

</html>

4. 使用flex实现（利用主轴交叉轴的对齐属性）

<!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>
        .father {
            display: flex;
            width: 800px;
            height: 400px;
            background-color: aqua;
            justify-content: center;
            align-items: center;
        }

        .son {
            width: 200px;
            height: 150px;
            background-color: bisque;
            flex-shrink: 0;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
    </script>
</body>
</html>