PHP如何设置垂直居中，如何竖直居中⼀个元素竖直居中⼀个元素的⽅法：1、通过“line-height”属性对单⾏内联元素实现垂直居中；2、利⽤flex布局实现垂直居中；3、使⽤“absolute+负margin”实现块级元素垂直居中。
垂直居中
1.单⾏内联元素垂直居中
单⾏内联元素垂直居中。。
#box {
height: 120px;
line-height: 120px;
border: 2px dashed #f69c55;
}
2.多⾏内联元素垂直居中
①利⽤flex布局(flex)
利⽤flex布局实现垂直居中，其中flex-direction: column定义主轴⽅向为纵向。这种⽅式在较⽼的浏览器存在兼容性问题。
Dance like nobody is watching, code like everybody is.
Dance like nobody is watching, code like everybody is.
Dance like nobody is watching, code like everybody is.
.parent {
height: 140px;
display: flex;
flex-direction: column;
justify-content: center;
border: 2px dashed #f69c55;
}
②利⽤表布局(table)
利⽤表布局的vertical-align: middle可以实现⼦元素的垂直居中
The more technology you learn, the more you realize how little you know.
The more technology you learn, the more you realize how little you know.
The more technology you learn, the more you realize how little you know.
.parent {
display: table;
height: 140px;
border: 2px dashed #f69c55;
}
.child {
display: table-cell;
vertical-align: middle;
}
3 块级元素垂直居中
①使⽤absolute+负margin(已知⾼度宽度)
css设置文字垂直居中
通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素⾼度的⼀半，就可以实现了。
固定⾼度的块级元素垂直居中。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}
②使⽤absolute+transform
当垂直居中的元素的⾼度和宽度未知时，可以借助CSS3中的transform属性向Y轴反向偏移50%的⽅法实现垂直居中。但是部分浏览器存在兼容性的问题。
未知⾼度的块级元素垂直居中。
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
③使⽤flex+align-items
通过设置flex布局中的属性align-items，使⼦元素垂直居中。
未知⾼度的块级元素垂直居中。
.parent {
display:flex;
align-items:center;
}
④使⽤table-cell+vertical-align
通过将⽗元素转化为⼀个表格单元格显⽰(类似
和 )，再通过设置 vertical-align属性，使表格单元格内容垂直居中。Demo
.parent {
display: table-cell;
vertical-align: middle;
}
推荐学习：《前端视频》

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。