CSS 5 种居中方法总结

最新推荐文章于 2025-03-06 10:05:36 发布

在养一只虎纹�

最新推荐文章于 2025-03-06 10:05:36 发布

阅读量346

点赞数

分类专栏： JavaScript 文章标签： css html

本文链接：https://blog.csdn.net/yutingwu816/article/details/109025161

版权

JavaScript 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了如何使用CSS实现文本及不同类型元素的水平和垂直居中，包括块级元素、图片等，提供了多种实用的布局技巧。

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

元素的居中主要分为垂直居中和水平居中，其中不同类型的元素，比如块级元素，行内元素，文本等有不同的居中对齐方式。
水平居中
1.块级元素水平居中：元素设置宽高后 margin: 0 auto
HTML

    <div id="mydiv">
        块级元素
    </div>

CSS

        #mydiv {
            width: 300px;
            height: 100px;
            background-color: pink;
            margin: 0 auto;
        }

2.文本元素在其他元素内部水平居中：text-align: center
HTML

    <div id="mydiv">
        块级元素
    </div>

CSS

        #mydiv {
            width: 300px;
            height: 100px;
            background-color: pink;
            text-align: center;
        }

垂直居中
3. 文字垂直居中: line-height = height
HTML

    <div id="mydiv">
        块级元素
    </div>

        #mydiv {
            width: 300px;
            height: 100px;
            background-color: pink;
            line-height: 100px;
        }

4.元素垂直居中，以img标签为例：首先父盒子相对定位，子盒子绝对定位，子盒子上下左右设置为0，最后margin: auto
HTML

    <div id="myimage">
        <img src="images/tb.jpg" alt="tb">
    </div>

CSS

        #myimage {
            position: relative;
            width: 600px;
            height: 300px;
            background-color: pink;
        }
        #myimage img {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }

5.元素垂直居中方法2，使用display和vertical-align属性。设置父元素display为table，子元素设置为table-cell, 子元素的vertical-align属性设为middle. 此处子元素将占据父元素的全部空间。
HTML

    <div id="div3">
        <span><img src="images/tb.jpg" alt=""></span>
    </div>

CSS

        #div3 {
            width: 600px;
            height: 400px;
            background-color: pink;
            /* 父元素设置表格属性 */
            display: table;  
            text-align: center;
        }
        #div3 span {
            /* 子元素设置表格元素属性 */
            display: table-cell;
            /* background-color: green; */
            vertical-align: middle;
        }