CSS笔记 关于竖直居中布局

单行文本

设置行高与元素高度相等

.content {
    height: 100px;
    line-height: 100px;
}

<div class="content"> content words</div>  

定位和transform

.content {
    position: absolute;
    top: 50%; 
    transform: translateY(-50%); //y轴方向向上偏移元素自身宽度的50%;
}

设置元素块为绝对定位，top值设置为50%，则元素块整体向下偏移了50%，再往上调整元素本身高度的二分之一。

flex布局

 .wrapper {
     height: 400px;
     width: 100%;
     background: red;
     display: flex;
  }

 .content {
     background: yellow; 
     align-self: center;
 }

<div class="wrapper">
    <div class="content">
        this is content this is content this is content
    </div>
</div>