css文字上下居中，一行文字居中，两行或多行文字同样居中

附图:

1. 利用Flex布局实现

demo.html

<div class="demo demo-flex"><span>孤云将野鹤，岂向人间住。莫买沃洲山，时人已知处。</span></div>

style.css

.demo {
        width: 120px;
        height: 200px;
        border: 1px solid red;
        /*line-height: 25px;*/
        font-size: 12px;
      }
      .demo-flex{
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
      }

2. 利用属性 line-height

<div id="box">
　　<span>文本上下居中</span>
</div>

style.css

#box {
      width: 200px;
      height: 120px;
      border: 1px solid red;
      text-align: center;
 }
#box span {
      line-height: 120px;
}

注意:　这个方法只适用于 单行文本

3. 利用position 定位来实现

 html

<div class="box">
    <a class="remind">春宵一刻值千金，花有清香月有阴。歌管楼台声细细，秋千院落夜沉沉。</a>
</div>

css

.box{
  width: 500px;

  height: 500px;

  border: 1px solid red;

  text-align: center;
}

定位方法 (一)

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

定位方法 (二)

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

4. 利用 vertical-align 来实现

即在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐，从而达到垂直居中的目的。

    <div id="box">
      <span>两个黄鹂鸣翠柳</span>
    </div>

css

#box {
  width: 200px;
  height: 120px;
  border: 1px solid red;
  text-align: center;
   7 }
#box::before {　　　　//  　　伪元素
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
#box span {
  vertical-align: middle;
}

 

5. 利用 Flex布局 来实现

<div id="box">
   <span>两个黄鹂鸣翠柳</span>
</div>

css

#box {
        width: 200px;
        height: 120px;
        border: 1px solid red;
        /*text-align: center;*/
        display: flex;
        align-items: center;
        justify-content: center;
      }