css垂直居中和水平居中的方法

最新推荐文章于 2024-07-24 13:45:34 发布

一只月月鸟呀

最新推荐文章于 2024-07-24 13:45:34 发布

阅读量67

点赞数

分类专栏： # CSS 文章标签： css html html5

本文链接：https://blog.csdn.net/m0_46149348/article/details/120250910

版权

CSS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

垂直居中

设置line-height等于height
父元素position:absolute，子元素position：absolute+top:50%+transform：translateY（-59%）
父元素display：flex+align-items：center
父元素display：table，子元素display：table-cell+vertic-align：middle

水平居中

行内元素：text-align:center
块级元素：margin：0 auto
父元素position:absolute，子元素position：absolute + left:50%+transform:translateX（-50%）
父元素display：flex+justify-content：center
测试代码：

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>水平居中和垂直居中练习</title>
</head>

<body>
    <li class="title">居中练习</li>
    <p>1.水平居中</p>
    <div class="center" style="width: 800px; background-color: grey;text-align: center;">
        <p>1）.行内元素：text-align:center</p>

        <div style="margin: 0 auto;background-color: rgb(68, 199, 68);">
            <p>2）.块级元素：margin：0 auto</p>
        </div>
    </div>
    <div class="center" style="height: 100px; position: relative;width: 800px;background-color: hotpink;">
        <p style="text-align: center;">3）.position：absolute + left:50%+transform:translateX（-50%）</p>
        <div
            style="position: absolute;left: 50%;transform: translateX(-50%);background-color: rgb(58, 49, 53);text-align: center;">
            一个子div
        </div>
    </div>
    <div style="width: 800px; display: flex;background-color: rgb(27, 216, 153);justify-content: center;">
        <div>
            4）.display：flex+justify-content：center
        </div>
    </div>
    <p>2.垂直居中</p>
    <div style="width: 800px;background-color: rgb(167, 115, 115);">
        <p>1）.设置line-height等于height</p>
        <div style="height: 50px;background-color: hotpink;line-height: 50px;">
            居中的文字
        </div>
        <p>2）.position：absolute+top:50%+transform：translateY（-59%）</p>
        <div style="position: relative;height: 50px;background-color: indigo;">
            <div style="position: absolute;top: 50%;transform: translateY(-50%);background-color: ivory;">
                居中的div
            </div>
        </div>
        <p>3）.display：flex+align-items：center</p>
        <div style="display: flex;align-items: center;background-color: lawngreen;height: 50px;">
            <div style="background-color: khaki;">居中的div</div>
        </div>
        <p>4）.display：table+display：table-cell+vertic-align：middle</p>
        <div style="height: 50px;background-color: lime;display: table;">
            <div style="display: table-cell;vertical-align: middle;">
                居中的文字
            </div>
        </div>
    </div>
</body>

测试结果：
在这里插入图片描述

一只月月鸟呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
css垂直居中和水平居中的方法

垂直居中设置line-height等于height父元素position:absolute，子元素position：absolute+top:50%+transform：translateY（-59%）父元素display：flex+align-items：center父元素display：table，子元素display：table-cell+vertic-align：middle水平居中行内元素：text-align:center块级元素：margin：0 auto父元素posit
复制链接

扫一扫