css实现元素水平垂直居中

王哪儿跑啊

已于 2022-06-21 15:38:32 修改

阅读量72

点赞数

分类专栏： css 文章标签： css css3 javascript

于 2022-05-29 12:22:04 首次发布

本文链接：https://blog.csdn.net/weixin_45836027/article/details/125029275

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.给父元素设置flex布局；

<style>
        .parent {
            width: 200px;
            height: 200px;
            background-color: green;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>

2. 已知盒子的宽高

<style>
        .parent {
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
        }

        .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="parent">
        <div class="son"></div>
    </div>
</body>

3.元素的宽高未知

<style>
        .parent {
            width: 200px;
            height: 200px;
            background-color: green;
            position: relative;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>

4.position：子绝父相 top：0；right：0；bottom：0；left：0； margin：auto

.son {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
        }

5.设置文本的居中

 <style>
        .parent {
            width: 200px;
            height: 200px;
            background-color: green;
        }

        p {
            color: pink;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>

<body>
    <div class="parent">
        <p>我是仙女</p>
    </div>