第一种方法
.parent{
/* 父元素设为块级表格元素 */
/* 父元素宽度设为100%就可以在整个屏幕中垂直居中了,如果给子元素宽度设置为100%没用,
/* 对display:table-cell的元素使用百分比设置宽度和高度没有用,可以设置固定宽度和高度*/
display: table;
border:1px solid red;
width: 100%;
height: 100px;
}
.children{
/* 子元素设为表格单元格 */
display: table-cell;
vertical-align: middle;
border:1px solid yellow;
text-align: center;
}
<div class="parent">
<div class="children">
<span>大家好</span><br>
<span>大家好</span>
</div>
</div>
第二种方法
display: flex;
flex-direction: column;
justify-content: center;
第三种方法
盒子不设置高度,由里面的文字撑起来,然后加上相同的padding