面试中常问的几个水平、垂直居中的方法

最新推荐文章于 2024-08-07 19:17:39 发布

小木house

最新推荐文章于 2024-08-07 19:17:39 发布

阅读量725

点赞数 1

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/qq_21428081/article/details/88684619

版权

CSS 专栏收录该内容

15 篇文章

订阅专栏

本文详细介绍了CSS中实现文本和图片水平、垂直居中的多种方法，包括text-align、vertical-align、line-height属性的运用，以及单行文本、图片、多行文本的垂直居中策略。讨论了line-height对替换行内元素的影响，并提供了近似垂直居中和绝对垂直居中的实现方式。

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

1. 对齐相关的几个CSS属性

三个属性：text-align、vertical-align、line-height

参考链接：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/vertical-align

https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-align

https://developer.mozilla.org/en-US/docs/Web/CSS/line-height（英文版完整）

行内布局的相关内容：待整理，几个名词：

基线（baseline）、顶线（top）、底线（bottom）、中线（middle）、x-height
字符框、em框
内容区（content area）
行间距、半行间距
行内框盒子、内联盒子（inline box）
行框盒子（line box）
包含盒子（containing box）：包含块，出现在MDN的各种属性中，很重要，待整理

1.1 text-align

适用block元素

1.2 vertical-align

适用inline、inline-block、table-cell元素，以及::first-letter和::first-line

1.3 line-height

适用所有元素，以及::first-letter和::first-line

翻译如下

（1）对于块级元素，line-height指定了元素内部line-boxes的最小高度。（不是很理解？）

（2）对于非替代行内元素，line-height用于计算line-box的高度。

（3）对于替代行内元素，例如input、button，line-height没有影响，因此行间距对于替换行内元素也不起作用。

强调：对于替换行内元素来说，如果设置line-height，则没有影响；引申来说，如果对一个包含了替换元素的父元素来说，如果对其设置行高，也不会影响其中的替换行内元素，只会影响其中的非替换行内元素。（div中有img和span，div设置的line-height只会影响span，且在span没有设置自己的line-height的前提下。）

2.单行文本垂直居中

问题描述：单行文本垂直居中，一般指的是一个block元素中有一段单行文字

思路：让block元素line-height等于height

具体做法：可以仅设置line-height而不设置height，因为这种情况下，height自动等于line-height，因此height是冗余的，此外，height的兼容性也不好。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {margin:0;padding:0;}
        body {
            padding:50px;
        }
        div {
            line-height: 3;
            color:white;
            background-color: orangered;
            width:200px;
        }
    </style>
</head>
<body>
    <div>
        单行文本
    </div>
</body>
</html>

可以看出文本确实垂直居中了，但是水平方向没有居中，而是居左对齐，这是因为div中text-align没有设置，且默认值为left。如果想水平也居中的话，那么可以给div设置text-align:center;即可，效果如下，代码就不写了。

3.图片垂直居中

3.1 图片近似垂直居中

近似垂直居中一般都是相对于绝对垂直居中偏下的。

说明：正如1.3节中的强调所提，如果我们给img的父元素设置line-height，那么这个line-height只会作用在该父元素的其他非替换行内子元素上，比如匿名文本或者span元素，当然，如果此时img没有非替换行内元素作为兄弟元素，那么line-height作用在哪里了呢？答案就是幽灵空白结点了，具体含义和说明可以参见张鑫旭的博客或者慕课网视频。

写法：

图片的父元素设置一个大于图片高度的line-height
图片vertical-align:middle;

注意：如果父元素中有其他文本内容，那么需要考虑是否要单独设置line-height以覆盖从父元素继承的line-height

“近似”：对文字设置vertical-align:middle的实际含义为“使元素的中部与父元素的基线加上父元素x-height的一半（即文本的中线）对齐。”而这个父元素字体的中线其实要比父元素内容区的绝对垂直中线下沉（低），因此vertical-align:middle;并不是绝对垂直居中，只不过在父元素字体大小（font-size）较小时，这两条中线差别不大，当字体显著增大时，差异就很明显了。

“绝对垂直居中”：3.2和3.3会给出2种让图片绝对垂直居中的方法

兼容性：比较好，支持IE7+/Chrome/Firefox/Opera/Safri，但IE7时有一点需要注意，图片结尾的标签后面要折行或空格。

<div>
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2096432854,4113309096&fm=26&gp=0.jpg" width="150" height="150" alt="Some of a team">
</div>

        div {
            color:white;
            background-color: orangered;
            width:200px;
            line-height: 200px;
        }
        img {
            vertical-align: middle;
        }

此时行高就是给幽灵空白结点使用的了，如果还是不明白，可以在img标签后面紧跟上一个span标签，并对span标签inline-block化+背景色，就能看出来啦。添加了span的效果及代码如下：

    <div>
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2096432854,4113309096&fm=26&gp=0.jpg"
             width="150" height="150" alt="Some of a team"><span>xx</span>
    </div>

/*仅给出增加的代码，其他不变*/
        span {
            display: inline-block;
            background-color: black;
        }

此外，如果想让图片水平也居中，那么给div增加text-align:center即可，代码就不写了。

3.2 图片绝对垂直居中（font-size为0）

方法：在3.1方法的基础上，为父元素设置font-size为0。

思路：将图片所在的父元素的font-size设置为0，此时幽灵空白结点的各条线（基线、中线、顶线、底线）都重合在一起，因此幽灵空白结点的中线即与整个父元素内容区的绝对垂直中线重合，近似垂直居中可升级为绝对垂直居中。

缺点：如果父元素中有文本类的内容，将无法显示。需要对相应内容单独设置font-size，否则会继承父元素的font-size(0)而不显式。解决方法是为其他文本子元素都单独设置font-size以覆盖继承值。此外，正如3.1所提，文本子元素的line-height也要相应的设置适合自身的值以覆盖从父元素继承的line-height。

    <div>
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2096432854,4113309096&fm=26&gp=0.jpg"
             width="150" height="150" alt="Some of a team">
    </div>

        div {
            color:white;
            background-color: orangered;
            width:200px;
            line-height: 200px;
            font-size: 0;
        }
        img {
            vertical-align: middle;
        }

3.3 图片绝对垂直居中（辅助元素，最佳实践）

方法：在3.1方法的基础上，为img添加一个兄弟元素作为辅助元素，该兄弟元素的特点为inline-block化、宽度为0、高度100%、同时添加vertical-align:middle，一般用<i>标签即可。

说明：inline-block元素有天然的收缩特性，当没有内容时，其宽度自动为0。

思路：由于图片和辅助元素都是vertical-align:middle，因此可以实现绝对垂直居中。（不是很理解？）

兼容性：非常好。

    <div>
        <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2096432854,4113309096&fm=26&gp=0.jpg"
             width="150" height="150" alt="Some of a team"><i></i>
    </div>

        div {
            color:white;
            background-color: orangered;
            width:200px;
            line-height: 200px;
        }
        img {
            vertical-align: middle;
        }
        i {
            display: inline-block;
            height:100%;
            vertical-align: middle;
        }

4.多行文本垂直居中

多行文本垂直居中的方法与图片垂直居中的方法类似，因此先介绍了图片的垂直居中。

思路：将多行文本放在一个span标签中，将其inline-block化，那么就可以利用和图片一样的方法了。

说明：当文字垂直居中时，块级元素的高度即为所设置的line-height（块级元素的line-height是line box的最小高度）

方法：

文本放在span标签中，display:inline-block
父元素（这里是div）设置一个合适的line-height，大小超过文字需要的高度
span设置vertical-align:middle
1-3步骤完成的近似垂直居中，可以进一步为父元素添加font-size:0,同时对span重新设置font-size和line-height的方法，或者添加辅助元素实现绝对垂直居中。

4.1 多行文本近似垂直居中

近似垂直居中一般都是相对于绝对垂直居中偏下的。

    <div>
        <span>这是多行文本哦！这是多行文本哦！这是多行文本哦！这是多行文本哦！这是多行文本哦！这是多行文本哦！</span>
    </div>

        div {
            color:white;
            background-color: orangered;
            width:200px;
            line-height: 200px;
        }
        span {
            display: inline-block;
            vertical-align: middle;
            line-height: normal;
        }

4.2 多行文本绝对垂直居中，利用font-size:0

    <div>
        <span>这是多行文本哦！这是多行文本哦！这是多行文本哦！这是多行文本哦！这是多行文本哦！这是多行文本哦！</span>
    </div>

        div {
            color:white;
            background-color: orangered;
            width:200px;
            line-height: 200px;
            font-size: 0;
        }
        span {
            display: inline-block;
            vertical-align: middle;
            line-height: normal;
            font-size: 16px;
        }

4.3 多行文本绝对垂直居中，利用辅助元素

    <div>
        <span>这是多行文本哦！这是多行文本哦！这是多行文本哦！这是多行文本哦！这是多行文本哦！这是多行文本哦！</span><i></i>
    </div>

        div {
            color:white;
            background-color: orangered;
            width:200px;
            line-height: 200px;
        }
        span {
            display: inline-block;
            vertical-align: middle;
            line-height: normal;/*重新子元素文本行高来覆盖父元素的行高*/
        }
        i {
            display: inline-block;
            height:100%;
            vertical-align: middle;
        }

4.4 多行文本垂直居中（父元素高度不固定、padding-top=padding-bottom）

4.1-4.3都是将文字放在一个span中，再将这个span进行inline-block化和vertical-align的middle，其实也可以不用这么麻烦，接下来给出的4.4和4.5是其他思路，但是也会有自身的缺点和适用条件。

适用条件：div的高度不固定

思路：当块级元素高度不固定时，块级元素的高度只能通过其内容（这里为多行文本）来撑开。块级元素的height此时为多个行框高度的叠加（多个行框紧贴着放置），height=line-height*行数。此时，可以通过设置padding-top和padding-bottom的值相等来令多行文本垂直居中。

缺点：只有当div的高度不固定时才能使用，此外上下的padding取值多少只能凭感觉咯。而上面其他的方法中div的高度就是line-height了（因为没有设置height，跟单行文本垂直居中的思路类似吧。）

 <div>
       这是多行文本哦！这是多行文本哦！这是多行文本哦！这是多行文本哦！这是多行文本哦！
 </div>

        div {
            color:white;
            background-color: orangered;
            width:200px;
            padding: 20px 0;
        }

4.5 多行文本垂直居中（父元素高度table+table-cell）

具体的原理还不是很清楚？，关于display为table和table-cell的特性和应用待研究。

适用条件：块级元素的高度固定

方法：

将文字放在一个span中，span的display设置为table-cell
块级父元素的display设置为table，且设置height为一个固定值

    <div>
       <span>
           这是多行文本哦！这是多行文本哦！这是多行文本哦！这是多行文本哦！这是多行文本哦！
       </span>
    </div>

        div {
            color:white;
            background-color: orangered;
            width:200px;
            height: 200px;
            display: table;
        }
        span {
            display: table-cell;
            vertical-align: middle;
        }