澳门新葡萄京www27111com

步骤 1 : line-height方式   
步骤 2 : 内边距方式   
步骤 3 : table方式   

步骤 1 :

line-height方式


运行效果
<style> #d { line-height: 100px; } div{ border:solid 1px lightskyblue; } </style> <div id="d">line-height 适合单独一行垂直居中</div>
 澳门新葡萄京www27111com www.prowz.com <style>
#d {
line-height: 100px;
} 
div{
  border:solid 1px lightskyblue;
}
</style>

<div id="d">line-height 适合单独一行垂直居中</div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 2 :

内边距方式

借助设置相同的上下内边距,实现垂直居中效果,可以用在多行文本上
运行效果
<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>



源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果
步骤 3 :

table方式

首先通过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="http://www.prowz.com/example.gif"> </div>
<style>
#d {
display: table-cell;
vertical-align: middle;
height:200px;
}

div{
  border:solid 1px lightskyblue;
}
</style>
 
<div id="d">
<img src="http://www.prowz.com/example.gif">
</div>


源代码
1. 双击选中单词 2. 三击选中整行 3. CTRL+F 查找 4. F8 全屏编辑,再次点击恢复
渲染中 渲染完成
效果


HOW2J公众号,关注后实时获知布最新的教程和优惠活动,谢谢。


提问之前请登陆
关于 前端基础-CSS-垂直居中 的提问

尽量提供截图、代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 389538688
站长会在每个工作日早上尽量回答提问(如果有漏掉没有回答的,请进群提醒一下)
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
站长是玻璃心,提问的时候请语气温柔些 kiss~
截止2017-5-19日累计提问 1638个,站长回答了 1546个
截止2017-8-15日累计提问 2788个,站长回答了 2544个

上传截图