CSS文字或元素的水平垂直居中多种方式（简单明了）

比眉伴天荒 2021-09-15 19:12 610阅读 0赞

### 前言：水平居中，我们可以很容易想到使用text-align实现文字水平居中，使用margin:0px auto;可以实现元素水平居中；所以重点将是怎么实现文字和元素的垂直居中？？ ###

**--- 本文将通过举栗子说明各种解决方式：**

##  首先，单行文字、多行文字怎么水平垂直居中？？ ##

### ① 方案一：文本水平居中使用text-align:center即可，height设置和line-height一致可以实现单行文本垂直居中；如下 ###

.class1 {
          height:50px;
          width:500px;
          text-align: center;
          background-color:lightblue;
          line-height:50px;
          overflow: hidden;  
       }

<div class="class1">测试单行文字水平垂直居中</div>

## ##

### ②方案二：具体到像素，单行或多行文字垂直居中还可以通过上下padding相等来实现，如下 ###

.class2 {
          font-size:20px;
          color:red;
          padding:20px 0px;
          border:1px solid red;
          text-align:center; 
       }

<p class="class2">这是段落内容，可以通过上下padding实现文字垂直居中</p>

### ③方案三：使用flex布局的justify-content: center;align-items: center;以及text-align:center;来单行或多行文字水平垂直居中实现，如下 ###

.class3 {
          height:90px;
          color:blue;
          border:1px solid red;
          display:flex;
          justify-content: center;
          align-items: center;
          text-align:center;
       }

<p class="class3">这是段落内容，可以通过上下display:flex和text-align：center实现文字水平垂直居中，可以通过上下display:flex和text-align：center实现文字水平垂直居中，</p>

### ④方案四：display: table-cell;vertical-align: middle;实现单行或多行文字垂直居中，如下 ###

.class4 {
          height:90px;
          width:500px;
          text-align: center;
          background-color:orange;
          display: table-cell;
          vertical-align: middle;
       }

**注意：vertical-align:center只对行内元素有效，加上display：table-cell可以实现垂直居中的效果；但是table布局不推荐使用，因为会影响网页性能；**

## **元素水平垂直居中：** ##

### ①方案一：已知子元素宽高，比如宽高都是200px; 使用absoluted定位和负margin值是宽高的一半来实现水平垂直居中，如下 ###

.outBox {
          position: relative;
          width:600px;
          height:300px;
          border:1px solid purple;
       }
       .innerBox {
          width:200px;
          height:200px;
          background-color:lightblue;
          position: absolute;
          top:50%;
          left: 50%;
          margin-top:-100px;
          margin-left: -100px;
       }

<div class="outBox">
          <div class="innerBox">这是元素内容块，使用绝对定位结合负margin来实现垂直水平居中</div>
       </div>

**说明：项目中经常使用，兼容性较好**

### ②方案二：已知元素宽高。在绝对定位下，top、right、bottom、left均为0的情况下会自动填充父元素的可用空间，再使用margin：auto会平均分配空间；如下 ###

.outBox {
        position: relative;
        border:1px solid red;
        height:250px;
        width:650px;
    }
    .innerBox {
        width:300px;
        height:100px;
        position: absolute;
        top:0;bottom: 0;left:0;right:0;
        background-color: lightblue;
        margin:auto;
    }

<div class="outBox">
        <div class="innerBox">这是需要水平居中的元素，使用的是绝对定位top、bottom、left、right均为0</div>
    </div>

### ③方案三：元素未知或已知宽高。利用css3的transform实现垂直水平居中 ###

outBox {
        position: relative;
        border:1px solid red;
        height:250px;
        width:650px;
    }
    .innerBox {
        border:1px solid blue; 
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
    }

**说明：此方法和flex布局只支持IE9＋以上的浏览器。**

## ##

### ④元素未知或已知宽高。利用flex弹性布局实现（flex布局后续会详解） ###

.outBox {
        border:1px solid red;
        height:250px;
        width:650px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .innerBox {
        border:1px solid blue;
    }

## ##

## 其它常用的布局常遇到的问题demo ##

### Demo1: 如何解决单行图片和文字水平居中排列的问题？？ ###

<div>
        <img src="http://www.w3school.com.cn/i/eg_bookasp.gif" style="width:50px;height:50px;vertical-align: middle;">
        测试用的文字
    </div>

### 说明：只需要在img标签加上vertical-align:middle; 样式就可以实现单行图片文字垂直居中； ###

效果：  
![70][]

### Demo2：为什么在使用dispaly:inline-block; 的元素上使用vertical-align：middle;无效？？ ###

<div style="border:1px solid red ;width:220px;height:50px;display: inline-block;vertical-align: middle;text-align: center;">
        需要垂直居中显示的文字
    </div>
    <span>nihao</span>

### 说明：vertical-align:middle;只对行内元素有效。 使用了dispaly:inline-block;的元素可以理解为是可在一行内排列的块级元素，可以设置宽高；解决办法：使用display:cell-table;vertical-align：middle; 或使用line-height；或使用flex布局居中； ###

效果：

![70 1][]

[70]: /images/20210726/e88fd2b2fb5249dba980d6496288ebf6.png
[70 1]: /images/20210726/4028fc46e88a4526a6f775d57d860244.png