今天来介绍各种元素垂直居中,很实用哦!
依然是先上图片哦,看好了,是不是有你需要的呢?
行内元素垂直居中
- 利用display: table-cell; vertical-align: middle; 行内元素不能设置宽高,只能靠元素内容撑开, 但是父元素要有宽高的哈,这种相对比较简单;
- html
<h2>1、子元素是行内元素</h2>
<div class="big">
<span class="small">我是行内元素span</span>
</div>
- css
.big{
width: 800px;
height: 600px;
background: #cccccc;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.small{
background: #e87965;
}
块级元素垂直居中
- 块级元素的话相对来说就更简单了,有很多种情况,利用margin,padding,position定位,会有很多种方法的,既然是块级元素了肯定宽高是要设置的,否则垂直居中的父子关系也就没什么意义了,随便写了一个相对简单的
- html
<h2>/2、子元素是块级元素</h2>
<div class="box">
<div class="box_con">我是块级元素div</div>
</div>
- css
.box{
width: 800px;
height: 600px;
background: #a4afc6;
text-align: center;
overflow: hidden; /*如果不加这个属性,小心内边框凹陷哦*/
}
.box_con{
width: 400px;
height: 300px;
margin: 150px auto;
background: #e8351d;
}
图片垂直居中
- 这应该是碰到最多,最不好控制的了,因为大多数我们不想去限制img的宽高,又想让img垂直居中,呼呼,代码见吧
- html
<h2>3、子元素是图片</h2>
<div class="big">
<img src="../img/1.jpg" alt="" title="我是块级元素img"/>
</div>
- css
.big{
width: 800px;
height: 600px;
background: #cccccc;
display: table-cell;
vertical-align: middle;
text-align: center;
}
-哈哈,其实跟行内元素是一样一样的哦,只是图片的大小不要超过他爸爸哦,否则。。。。
最后,多行文本垂直居中
- 这个用的应该不是太多吧,但是这是display:table;和display:table-cell;的神奇功效,不能放过呢
- html
<h2>4、多行文本垂直居中</h2>
<div class="par">
<p class="son">天边的最后一抹斜阳,黯淡了,无尽的黑暗将要袭来。我陷入了沉思中去。
日子一天一天地逝去,从满心不甘至无可奈何,最终落得个与世诀别。即使再不愿,也抵不过光阴的蹉跎,岁月的无情。似一支锋利的针,刺的多了,也便感觉不到疼了。只眼睁睁地盯着指里浸出的血红,一滴,一滴,禁锢了世界。
“最是人间留不住,朱颜辞镜,花辞树。”从落地开始,便踏入一个无法回头的路程,通往世界的那头。无法静止,无法再来,上天仅予了世人一次机会,一次,不可多得、万般珍贵的机会。
当然,现在的你,或许是豆蔻年华的少年,性格作风间,满是少年的意气风发,锋芒毕露,好比“少年不识愁滋味,爱上层楼,爱上层楼”“左牵黄,右擎苍”;或是初来乍到的中年人,不必前者,中年人,更加成熟稳重了,当然,也添了更多的责任,有自己的信念,需要去守护。但,时光流逝的匆匆,就有了“无可奈何花落去,似曾相识燕归来”的诗句;又或是已生皱纹,苍苍白发的老人,届时,离路程的尽头,离结束不远了。更多的,也是释然。“高堂明镜悲白发,朝如青丝暮成雪。”操劳了一生,也要停止了。
</p>
</div>
- css
.par {
display: table;
width: 800px;
height: 600px;
text-align: center;
padding: 0 150px;
box-sizing: border-box;
background: #156bff;
}
.son {
display: table-cell;
background: #c0a2ff;
vertical-align: middle;
}
子元素往往会100%宽高继承父级元素,所以如果想设置资源的占比小点的话,是需要给父级元素设置padding属性值的,当然,也要加上box-sizing:border-box;否则子元素会溢出哦。
最后的最后,整篇代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.big{
width: 800px;
height: 600px;
background: #cccccc;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.small{
background: #e87965;
}
.box{
width: 800px;
height: 600px;
background: #a4afc6;
text-align: center;
overflow: hidden; /*如果不加这个属性,小心内边框凹陷哦*/
}
.box_con{
width: 400px;
height: 300px;
margin: 150px auto;
background: #e8351d;
}
.par {
display: table;
width: 800px;
height: 600px;
text-align: center;
padding: 0 150px;
box-sizing: border-box;
background: #156bff;
}
.son {
width: 500px;
display: table-cell;
background: #c0a2ff;
vertical-align: middle;
}
</style>
</head>
<body>
<div id="wrapper">
<!--子元素是行内元素-->
<h2>1、子元素是行内元素</h2>
<div class="big">
<span class="small">我是行内元素span</span>
</div>
<!--子元素是块级元素-->
<h2>/2、子元素是块级元素</h2>
<div class="box">
<div class="box_con">我是块级元素div</div>
</div>
<!--子元素是图片-->
<h2>3、子元素是图片</h2>
<div class="big">
<img src="../img/1.jpg" alt="" title="我是块级元素img"/>
</div>
<h2>4、多行文本垂直居中</h2>
<div class="par">
<p class="son">天边的最后一抹斜阳,黯淡了,无尽的黑暗将要袭来。我陷入了沉思中去。
日子一天一天地逝去,从满心不甘至无可奈何,最终落得个与世诀别。即使再不愿,也抵不过光阴的蹉跎,岁月的无情。似一支锋利的针,刺的多了,也便感觉不到疼了。只眼睁睁地盯着指里浸出的血红,一滴,一滴,禁锢了世界。
“最是人间留不住,朱颜辞镜,花辞树。”从落地开始,便踏入一个无法回头的路程,通往世界的那头。无法静止,无法再来,上天仅予了世人一次机会,一次,不可多得、万般珍贵的机会。
当然,现在的你,或许是豆蔻年华的少年,性格作风间,满是少年的意气风发,锋芒毕露,好比“少年不识愁滋味,爱上层楼,爱上层楼”“左牵黄,右擎苍”;或是初来乍到的中年人,不必前者,中年人,更加成熟稳重了,当然,也添了更多的责任,有自己的信念,需要去守护。但,时光流逝的匆匆,就有了“无可奈何花落去,似曾相识燕归来”的诗句;又或是已生皱纹,苍苍白发的老人,届时,离路程的尽头,离结束不远了。更多的,也是释然。“高堂明镜悲白发,朝如青丝暮成雪。”操劳了一生,也要停止了。
</p>
</div>
</div>
</body>
</html>