文本在盒子中水平、垂直居中（图片与文本居中）、多行文本垂直居中、盒子居中

置顶 muzidigbig

已于 2023-11-21 17:26:52 修改

阅读量3.4w

点赞数 16

分类专栏： css问题锦囊前端面试题文章标签：文本居中垂直图片文本居中多行文本垂直居中 css多行文本垂直居中居中布局盒子居中布局方法

于 2018-05-23 10:37:12 首次发布

本文链接：https://blog.csdn.net/muzidigbig/article/details/80415934

版权

前端面试题同时被 2 个专栏收录

72 篇文章 12 订阅

订阅专栏

css问题锦囊

15 篇文章 0 订阅

订阅专栏

在样式布局中，我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单：对文本，只需要对其父级元素设置text-align: center;，而对div等块级元素，只需要设置其left和right的margin值为auto。要实现元素的垂直居中，有人会想到css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，例如表格元素中的<td>、<th>、<caption>等，而像<div>、<span>这样的元素是没有valign特性的，因此使用vertical-align对它们不起作用。因此我们需要通过别的方法去实现元素的垂直居中，下面我总结了几种了常用垂直居中方法。

一、文本居中

1.单行文本垂直居中

对于单行文本，我们只需要将文本行高(line-height)和所在区域高度(height)设为一致即可：

<!--html代码-->
    <div id="div1">
        这是单行文本垂直居中
    </div>

/*css代码*/
        /*方式一*/
        #div1{
            width: 300px;
            height: 100px;
            margin: 50px auto;
            border: 1px solid red;
        }
        /*方式二*/
        #div1{
            height: 100px;
            line-height: 100px; /*设置line-height与父级元素的height相等*/
            text-align: center; /*设置文本水平居中*/
            overflow: hidden; /*防止内容超出容器或者产生自动换行*/ 
        }

这里写图片描述

2.多行文本垂直居中

多行文本垂直居中分为两种情况，一个是父级元素高度不固定，随着内容变化；另一个是父级元素高度固定。

2.1父级元素高度不固定

父级高度不固定的时，高度只能通过内部文本来撑开。这样，我们可以通过设置内填充（padding）的值来使文本看起来垂直居中，只需设置padding-top和padding-bottom的值相等：

<!--html代码-->
    <div id="div1">
            这是多行文本垂直居中，
            这是多行文本垂直居中，
            这是多行文本垂直居中，
            这是多行文本垂直居中。
    </div>

/*css代码*/
        #div1{
            width: 300px;
            margin: 50px auto;
            border: 1px solid red;
            text-align: center; /*设置文本水平居中*/
            padding: 50px 20px;/*通过内边距将盒子撑大实现居中*/
        }

这里写图片描述

2.2父级元素高度固定

本文一开始就提到css中的vertical-align属性，但是它只对拥有valign特性的元素才生效，结合display: table;，可以使得div模拟table属性。因此我们可以设置父级div的display属性：display: table;然后再添加一个div包含文本内容，设置其display:table-cell;和vertical-align:middle;。具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style >
        .middle-box{
            display: table; 
            height: 300px;
            width: 400px;
            border: 1px solid red ;
        }
        .middle-inner{
            display: table-cell; 
            vertical-align:middle; 
            /* text-align:center; */
        }
    </style>
</head>
<body>
    <div class="middle-box">
        <div class="middle-inner">
                缺点就是不兼容ie6、ie7缺点就是不兼容ie6、ie7缺点就是不兼容ie6、ie7缺点就是不兼容ie6、ie7缺点就是不兼容ie6、ie7缺点就是不兼容ie6、ie7缺点就是不兼容ie6、ie7缺点就是不兼容ie6、
                ie7缺点就是不兼容ie6、ie7缺点就是不兼容ie6、ie7缺点就是不兼容ie6、ie7缺点就是不兼容ie6、ie7缺点就是不兼容ie6、ie7缺点就是不兼容ie6、ie7缺点就是不兼容ie6、ie7缺点就是不兼容ie6、ie7
        </div>
    </div>
</body>
</html>

但是，在IE7中显示效果如下：
这里写图片描述

注意：虽然display：table解决了避免使用表格的问题，但有几个需要注意的：

（1）display: table时padding会失效
（2）display: table-row时margin、padding同时失效
（3）display: table-cell时margin会失效

这是因为IE7及以下的版本并不能很好的支持display:table和display:table-cell属性，当然，如果你不考虑IE7以下的版本的浏览器，上述方法是可以实现垂直居中。如果把IE7及以下版本考虑进去，我们可以通过用到CSS hack的知识来设置针对不同浏览器的属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style >
        #outer{
            position:relative;  
            top: 0;
            left: 0;
            width: 400px;
            height: 200px;
            margin: 50px auto;
            border: 1px solid red;
        }
        #middle{ 
            width:100%;
            text-align: center; /*设置文本水平居中*/  
            position:absolute;   
            top:50%;  
            left: 50%;
            transform: translate(-50%,-50%)
        }
    </style>
</head>
<body>
    <div id="outer">
        <div id="middle">
            <div id="content">
                这是固定高度多行文本垂直居中(兼容IE7)，
                这是固定高度多行文本垂直居中(兼容IE7)，
                这是固定高度多行文本垂直居中(兼容IE7)，
                这是固定高度多行文本垂直居中(兼容IE7)。
            </div>
        </div>
    </div>
</body>
</html>

2.3 利用line-height和vertical-align：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>css居中对齐</title>
    <style>  
        *{padding: 0;margin:0;font-size: 12px;}  
        div{
            float: left;
            margin: 20px;
            width: 200px;
            height:200px;
            line-height: 200px;
            border:1px solid #000; 
        }  
        span{
            display: inline-block;
            vertical-align: middle;
            line-height: 22px;
        }
    </style>
    <div>  
        <span>测试文字测试文字</span>  
    </div>  
    <div>  
        <span>测试文字 <br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字<br/> 测试文字</span>  
    </div>
</body>
</html>

效果：

关键样式：

　　① 父元素（这里是div）设置和高度一致的 line-height （这里是200px）--- 由后面的vertical-align定义看，这是为了设置div的基线

　　② 子元素 (这里是span) 设置合适的line-height，并设置display:inline-block、vertical-align: middle; --- inline水平的元素无法设置line-height，所以这里要设置inline-block。

　　重新审视一下 CSS vertical-align 属性的定义：

　　该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐，允许指定负长度值和百分比值，这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

　　有以下几点需要注意：

　　① vertical-align属性应该设置到行内元素上（行内块元素也可）

　　② 如果文字的总高度超出了容器（这里是div）的高度，那么垂直居中会失效。

　　③ ie7以下 span结束标签和内部内容不能有间隔空白，也就是说span的结束标签和内部内容要连在一起。

3.图片和文字垂直居中对齐（图片与文字在同一行）

vertical-align对inline-block最敏感。默认属性是:vertical-align:baseline;

二、盒子居中

特别说明：在元素设置position:absolute;来设置居中效果时，除去博客下介绍的css3方法外，还可以使用负的margin来居中，这样解决了兼容性的问题，但是只适用于宽高已知的情况（因为负的偏移量为元素宽高的一半）。宽高改变时，不再是居中效果。

在这些布局中的子元素，因为其属性设置，都默认为内容宽度。

本文所有居中的例子，只讨论css的实现，html代码统一如下：

    <div class="parent">   
        <div class="child">demo</div>   
    </div>

1. 水平居中

1.1 inline-block配合text-align（父元素）


    .parent{   
        text-align: center;   
    }   
    .child{   
        display: inline-block;   
    }

优点：兼容性非常好，只需要添加只需要在子元素的css中添加*display:inline和*zoom:1就可兼容到IE6、7；
缺点：内部文字也会水平居中，需消除影响。

1.2 table配合margin（子元素）

display:table；此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。

    .child{   
        display:table;   
        margin: 0 auto;   
    }

优点：设置特别简单，只需对子元素进行设置，支持IE8+，需支持IE6，7时，可更换子元素为表格结构。

1.3 abasolute配合transform

    .parent{   
        position:relative;   
    }   
    .child{   
        position:absolute;   
        left:50%;   
        transform: translateX(-50%);   
    }

优点：居中元素不对其他元素产生影响。缺点：CSS3新属性支持IE9+，低版本浏览器不支持。

1.4 定位的盒子水平居中：先左右走父元素盒子的一半50%，在向左走子盒子的一半(margin-left:负值。)（前提宽高已知）

.child{
  width: 200px;
  height: 200px;
  background: #666;
  position:absolute;
  left: 50%;
  margin-left: 100px;
}

1.4 margin:0 auto;

2. 垂直居中

2.1 table-cell配合vertical-align（父元素）

display:table-cell;此元素会作为一个表格单元格显示（类似 <td> 和 <th>）

.parent{   
    display: table-cell;   
    vertical-align:middle;   
}

优点：设置简单，只需对父元素进行设置，兼容到IE8+，需兼容地版本浏览器时，可更换div为表格结构。

2.2 absolute配合tranform

 
    .parent{   
        position:relative;   
    }   
    .child{   
        position:absolute;   
        top: 50%;   
        transform: translateY(-50%);   
    }

2.2 定位的盒子垂直居中：先上下走父元素盒子的一半50%，在向上走子盒子的一半(margin-left:负值。)（前提宽高已知）

.child{
  width: 200px;
  height: 200px;
  background: #666;
  position:absolute;
  top: 50%;
  margin-top: 200px;
}

3. 水平+垂直居中

3.1 inline-block配合text-align加上table-cell配合vertical-align

 
    .parent{   
        display: table-cell;   
        vertical-align:middle;   
        text-align:center;   
    }   
    .child{   
        display: inline-block;   
    }

优点：综合前两中方法，兼容性好！支持IE8+，低版本浏览器也好兼容。缺点：设置较为复杂。

3.2 absolute配合transform

方式一

 
    .parent{   
        position: relative;   
    }   
    .child{   
        position: absolute;   
        left: 50%;   
        top: 50%;   
        transform: translate(-50%,-50%);   
    }

优点：居中元素不对其他元素产生影响。缺点：CSS3新属性支持IE9+，低版本浏览器不支持。

方式二

    .child{   
        position: absolute;   
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
    }

4. 全能的flex

css3新增布局属性，布局简单，强大，性能略差，只支持IE10+，在移动端使用较多。

4.1 水平居中

 
    /*当父元素设置display: flex;时，子元素为flex-item，默认为内容宽度。*/  
    .parent{   
        display: flex;   
        justify-content: center;   
    }   
    /* 在设置子元素为margin: 0 auto;时，可删除父元素的justify-content: center;同样可以达到居中效果*/  
    /*  .child{  
            margin: 0 auto;   
        }*/

4.2 垂直居中

 
    .parent{   
        display: flex;   
        align-items: center;   
    }

4.3 水平垂直居中

 
    parent{       
        display: flex;       
        justify-content: center;       
        align-items: center;       
    }       
    /*如同flex布局的第一部分一样这里也可以对子元素进行下面的设置：同时删除上面的除去display外的其他属性*/      
    /*  .child{     
            margin:auto;     
        } */

如有不足请谅解！希望给您带来帮助！参考文献：https://blog.csdn.net/u014607184/article/details/51820508