CSS中文本居中显示

1. 让文本水平居中，使用 text-align: center;

<div>在水平方向上居中</div>   div {      width: 450px;      height: 150px;      color: #fff;      background-color: red;      text-align: center;  }

2.让文本水平垂直居中，可以让元素显示为单元格，让单元格原本的垂直居中发挥作用：

<div class="parent">     <div class="child">水平垂直居中   水平垂直居中   水平垂直居中  水平垂直居中   水平垂直居中</div> </div>  .parent {    width: 400px;    height: 200px;    border: 1px solid #f00;    display: table-cell;    text-align: center;    vertical-align: middle; }

3. 不确定高度的一段文本竖直居中，使用 padding-top: …; padding-bottom: …; padding-top 和 padding-bottom 值相同.

<div>不确定高度的文本在竖直方向上居中</div>   div {       width: 150px;       color: #fff;       background-color: red;       padding-top: 30px;       padding-bottom: 30px;   }

4.CSS3使用弹性盒子布局 , 可以让文本水平垂直居中 . 具体通过使用 display:flex; align-items: center; justify-content: center;

<div class="parent-box">     <div class="child-box">使用弹性盒子布局 让文本水平垂直居中</div> </div>  .parent-box {             width: 400px;             height: 150px;             display: flex;             justify-content: center; /* 让子元素水平居中 */             align-items: center; /* 让子元素垂直居中 */             border: 1px solid #999;   } .child-box {        background-color: #fe5454;        color: #fff;   }