how2j.cn

步骤 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>
<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://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="http://how2j.cn/example.gif">
</div>


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


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


问答区域    
2018-04-01 内边距方式我跑起来有问题呢
你没有时间啦



RT
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">


<style>
#d{
    padding: 30 0;
}
div{
    border:solid 1px lightskyblue;
}
</style>
 
<div id="d">多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容 多行内容  </div>




</body>
</html>

							


4 个答案

JGD 答案时间:2018-07-17
感谢,加上px就好了

叫我皮卡丘 答案时间:2018-05-23
你试试...padding:30px 0; 加个 px

18063 答案时间:2018-05-06
我的不是啊,和老大的一样

你没有时间啦 答案时间:2018-04-01
用chrome打开,文字是贴在顶部和底部的




答案 或者 代码至少填写一项, 如果是自己有问题,请重新提问,否则站长有可能看不到









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

尽量提供截图代码异常信息,有助于分析和解决问题。 也可进本站QQ群交流: 902680467
提问尽量提供完整的代码,环境描述,越是有利于问题的重现,您的问题越能更快得到解答。
对教程中代码有疑问,请提供是哪个步骤,哪一行有疑问,这样便于快速定位问题,提高问题得到解答的速度
在已经存在的几千个提问里,有相当大的比例,是因为使用了和站长不同版本的开发环境导致的,比如 jdk, eclpise, idea, mysql,tomcat 等等软件的版本不一致。
请使用和站长一样的版本,可以节约自己大量的学习时间。 站长把教学中用的软件版本整理了,都统一放在了这里, 方便大家下载: http://how2j.cn/k/helloworld/helloworld-version/1718.html

上传截图