|
|
|
|
步骤 2 : 内边距方式 步骤 3 : table方式 <style>
#d {
line-height: 100px;
}
div{
border:solid 1px lightskyblue;
}
</style>
<div id="d">line-height 适合单独一行垂直居中</div>
<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>
<style>
#d {
padding: 30 0;
}
div{
border:solid 1px lightskyblue;
}
</style>
<div id="d">多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 </div>
首先通过display: table-cell;把div用单元格的形式显示，然后借用单元格的垂直居中vertical-align: middle; 来达到效果。
这样对图片也可以居中，上一步 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>
<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>
HOW2J公众号，关注后实时获知最新的教程和优惠活动，谢谢。
问答区域
2018-04-01
内边距方式我跑起来有问题呢
5 个答案
nice98 跳转到问题位置 答案时间：2019-10-05 谷歌浏览器不行，必须加个px
JGD 跳转到问题位置 答案时间：2018-07-17 感谢，加上px就好了
叫我皮卡丘 跳转到问题位置 答案时间：2018-05-23 你试试...padding:30px 0; 加个 px
18063 跳转到问题位置 答案时间：2018-05-06 我的不是啊，和老大的一样
你没有时间啦 跳转到问题位置 答案时间：2018-04-01 用chrome打开，文字是贴在顶部和底部的
回答已经提交成功，正在审核。 请于 我的回答 处查看回答记录，谢谢
提问之前请登陆
提问已经提交成功，正在审核。 请于 我的提问 处查看提问记录，谢谢
|
