CSS 25 垂直居中
2021-01-20 12:14
标签：内容 https example 方式 gif pad ack border 设置 步骤 1 : 步骤 2 : 借助设置相同的上下内边距，实现垂直居中效果，可以用在多行文本上 步骤 3 : 首先通过display: table-cell;把div用单元格的形式显示，然后借用单元格的垂直居中vertical-align: middle; 来达到效果。 CSS 25 垂直居中 标签：内容 https example 方式 gif pad ack border 设置 原文地址：https://www.cnblogs.com/JasperZhao/p/13307619.htmlline-height方式
style>
#d {
line-height: 100px;
}
div{
border:solid 1px lightskyblue;
}
style>
div id="d">line-height 适合单独一行垂直居中div>
内边距方式
style>
#d {
padding: 30 0;
}
div{
border:solid 1px lightskyblue;
}
style>
div id="d">多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 div>
table方式
这样对图片也可以居中，上一步 line-height就不能对图片居中。style>
#d {
display: table-cell;
vertical-align: middle;
height:200px;
}
div{
border:solid 1px lightskyblue;
}
style>
div id="d">
img src="https://how2j.cn/example.gif">
div>
上一篇：css的clear清除浮动