css 文字垂直居中問題

CSS 文字垂直居中問題

問題：在 div 中文字居中問題： 當使用 line-height：100%%; 時，文字沒有居中，如下：

html: <div id="header_logo_des"></div>
CSS: #header_logo_des{
    width: 100%;
    height: 100%;
    font-size: 28px;
    text-align:center;
    line-height: 100%;  /*設置line-height與父級元素的height相等,不能使用%；*/
}

但結果如下：

原因：

line-height 屬性設置行間的距離（行高）
1. 不能為負值；
2. 最好設置為具體像素值，如：line-height: 60px;
3. 在大多數瀏覽器中默認行高大約是 110% 到 120%;

解決辦法：

1. 使用像素值:

eg:  line-height: 60px;  // 60px， 是當前 div 的高度

2. 使用 %：

eg: line-height: 200%;  // 調高百分比

3. 不再使用 div 直接寫文字，可使用其他內聯標簽包含文字，eg: <span>

HTML： <span>歲月靜好</span>
CSS:  span{
    font-size: 28px;
    display: block;  //內聯元素--塊級化
    text-align: center;  //文字水平居中
    line-height: 200%;  //文字垂直居中
}

4. 垂直居中 vertical-align: middle;  常用於圖片的垂直居中 

注意： vertical-align: middle;  //不要放在div中，因為<div>、<span>這樣的元素是沒有valign特性的

5. flex： 水平垂直居中

html: <div id="des">
          <span>歲月靜好</span>
      </div>
CSS: #des{
    width: 100px;
    height: 100px;
    display: flex;
    border: 2px solid #ffcfd3;
    background-color: #bacaee;
}
#des span{
    display: flex;
    flex: 1;
    justify-content: center;/*水平軸居中*/
    align-items: center;/*垂直軸居中*/
}