详解元素的水平居中

最新推荐文章于 2024-09-11 16:38:48 发布

kenny.feng

最新推荐文章于 2024-09-11 16:38:48 发布

阅读量2.2k

点赞数 3

文章标签： html css

本文链接：https://blog.csdn.net/fenganhai/article/details/105720355

版权

前言：这是本人的笔记，花了点时间整理出来，希望可以帮助一些朋友少走弯路，可能有些不足之处，欢迎评论区留言，请多指正（如果您觉得有所帮助，点赞支持哦）

元素的水平居中分两种情况：行内元素和块状元素，而块状元素又分为定宽块状元素和不定宽块状元素

一、行内元素的水平居中

方法：

如果被设置元素为文字、图片等行内元素时，对父元素设置text-align:center

html代码：

<body>
<div class="txtCenter">我是文本</div>
<br>
<div class="imgCenter"><img src="images/one.jpg"/></div>
</body>

css代码：

<style type="text/css">
    
    /* 文本的水平居中 */
    .txtCenter {
        background-color: #ccc;
        text-align: center;
    }
    
    /* 图片的水平居中 */
    .imgCenter {
        background-color: lightpink;
        text-align: center;
    }
</style>

效果：

二、块状元素的水平居中

当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

（一）定宽块状元素

前提：该元素的宽度width为固定值

方法：对该元素设置“左右margin”值均为“auto”

（“上下 margin” 可随意设置）

例如：设置div 这个块状元素水平居中

html代码：

<div id="parent">
    <div id="child">我是定宽块状元素，我要水平居中显示。</div>
</div>

css代码：

<style>
        #parent {
            background-color: red;
            width: 400px;
            height: 400px;
        }

        #child {
            background-color: lightblue;
            width: 300px;   /* 定宽 */
            height: 300px;
            margin-left: auto;
            margin-right: auto;
        }
</style>

效果：

原理：

首先块元素的盒模型水平方向上的属性：margin、 padding、 border、 content，由于子div要在父div中的content中居中（即父div的内容块，或者说是包含块），则只需考虑父div的content有关，而与父div的margin、border、padding无关。

对子div而言，在不考虑其padding和border的情况下（其实就是有padding或border，也不影响。如：设置padding-left，则影响的是子div中的content相对于父div不居中，但子div盒子相对于父div还是居中的，也就是说，只要margin-left和margin-right都为auto，则子div必居中与父div，而子div中的content这个部分是否与div另说）：

既然子div的padding和border不影响居中，所以为了简单起见，此处不设置padding和border，则子div中content的width就为整个子div的宽度。

由于父div中的content为400px，整个子div为300px，则剩余100px供子div的margin-left和margin-right来分，如果只设置其中一个为auto，则一个会得到剩余的整个空间，一个为0，结果就是处于父div最左或最右。“左右两边都为auto相当于两边平分剩下的空间”

（二）不定宽块状元素

在开发中会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)

不定宽度的块状元素有三种方法居中：

方法一：加入table 标签

方法二：设置display:table

方法三：直接在父元素中设置：text:align;

方法四：设置position:relative 和 left:50%

方法一：加入table 标签

原理是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定，它里面的内容多长，它就多长），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。

step1：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。

step2：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

举例：

html代码：

<div id="parent">
    <table>
        <tbody>
        <tr>
            <td>
                <div id="child">
                    我是子div中的第1行文本<br>
                    我是子div中的第2行文本<br>
                    我是子div中的第3行文本<br>
                </div>
            </td>
        </tr>
        </tbody>
    </table>
</div>

css代码：

<style>
        #parent { /* 父div不设置width，则为不定宽的块状元素 */
            background-color: red;
        }

        table { /* 它的width由其内容而定 */
            margin: 0 auto;
            border: 1px solid; /* 设置边框，便于查看table在哪里 */
        }
</style>

效果：

分析：

1.父div不设width，所以在水平方向上，无限延伸

2.table不设width，所以其宽度由其内容而定，则table就代表了其内容的整体，所以只要table居中于父div，则里面的整体内容就居中于父div

3.缺点：增加了无语义标签，table一般用来做表格，这里却用来居中

方法二：设置“display:table”

此方法是第（1）种方法的简化，不需要加table这些标签，直接对该元素进行设置

html代码：

<div id="parent">
    <div id="child">
        我是子div中的第1行文本<br>
        我是子div中的第2行文本<br>
        我是子div中的第3行文本<br>
    </div>
</div>

css代码：

<style>
#parent{      /* 父div不设置width，则为不定宽的块状元素 */
    background-color:red;
    display: table;
    margin:0 auto;
}
</style>

效果：

分析：由于父div不设width，所以在水平方向上，无限延伸，但由于此将父div作为表格来显示（类似 <table>），所以其宽度由其内容决定，所以宽度会如图所示，但也达到了居中效果

方法三：直接在父元素中设置：text:align;

html代码：同方法二

css代码：

<style>
        #parent { /* 父div不设置width，则为不定宽的块状元素 */
            background-color: red;
            text-align: center;     /*  这才是关键*/
        }
</style>

效果：

方法四：设置position:relative 和 left:50%（难点）

html代码：同方法二

css代码：

<style>
    #parent {
        clear: both;
        float: left;
        position: relative;
        left: 50%;
    }

    #child {
        position: relative;
        left: -50%;
    }
</style>

效果：