<body>
<div>
<span>多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本
垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本
直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居中多行文本垂直居
中多行文本垂直居中</span>
</div>
</body>
方法一:父元素使用display:table和子元素使用display:table-cell属性来模拟表格, 子元素设置vertical-align:middle和text-align:center即可垂直居中。
div{
background-color: aquamarine;
height: 400px;
width: 600px;
display: table;
}
span{
display: table-cell;
vertical-align: middle;
}
方法二:对子元素设置display:inline-block属性,使其转化成行内块元素, 利用line-height和vertical-align进行设置。
div{
background-color: aquamarine;
height: 400px;
width: 600px;
line-height: 400px;
}
span{
display: inline-block;
line-height: 20px;
vertical-align:middle;
}
方法三:使用定位,为父盒子设置宽高,使用相对定位,子盒子使用绝对定位,先向右向下偏移50%,再通过transform: translateY偏移自身宽度和长度的一半达到居中
div{
position: relative;
background-color: aquamarine;
height: 400px;
width: 600px;
z-index: 1;
}
span{
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
}
方法四:利用弹性布局,直接设置align-item属性,对子元素进行垂直居中
div{
background-color: aquamarine;
height: 400px;
width: 600px;
display: flex;
align-items: center;
}