登录
原创

css文字垂直居中

发布于 2020-11-18 阅读 449
  • CSS
原创

1.知道高度设置居中

.box1{
      border: 1px solid pink;
      height:300px;
      /* position: relative; */

    }
.box2{
      height: 100px;
      width: 100px;
      background-color: yellow;
      text-align: center;
      /* position: absolute;
      top:50%;
      left:50%;
      margin:-50px 0 0 -50px; */
      line-height:100px;          
     }
<div class="box1">
    <div class="box2">你好</div>
</div>

box2的高度为100px,所以设置line-height:100px,可以实现垂直居中的效果
4272cb25ef4cd15058af797c870d064.png

2.未知高度设置居中

.box2{
        height: 50%;
        background-color: yellow;
        color: red;
               
    }
.box2::before{
        display: inline-block;
        content:"";
        height: 100%;
        vertical-align: middle;
    }

9231ec9c504a96da347bc625fa0e863.png

利用表格特性

.box2{
  display:table-cell;
  height:100px;
  width:100px;
  background:yellow;
  text-align:center;
  vertical-align:middle;
}

评论区

励志做一条安静的咸鱼,从此走上人生巅峰。

0

0

0

举报