时间:2021-05-08
摘要:
在我们制作页面的时候经常会遇到内容垂直居中的需求,今天分享5种垂直居中的方法,每种方法都有自己的优缺点,可以选择自己喜欢的方式。以下代码都经过本人亲自测试。
line-height:
复制代码代码如下:
<style>
.content {
height:240px;
line-height: 240px;
}
</style>
<div class="content">
vertical-align:middle;
</div>
:before:
复制代码代码如下:
<style>
.content {
height: 240px;
}
.child:before {
content: ' ';
display: block;
height: 120px;
}
</style>
<div class="content">
<div class="child">
vertical-align:middle;</p><p></div></div>
padding-top:
复制代码代码如下:
<style>
.content {
height:240px;
}
.child {
padding-top: 120px;
}
</style>
<div class="content">
<div class="child">
vertical-align:middle;
</div>
</div>
position:absolute:
复制代码代码如下:
<style>
.content {
position:absolute;
height:240px;
}
.child {
position: relative;
top:50%;
}
</style>
<div class="content">
<div class="child">
vertical-align:middle;
</div>
</div>
display:table-cell;
复制代码代码如下:
<style>
#content {
display:table;
}
#child {
display:table-cell;
vertical-align:middle;
height: 300px;
}
</style>
<div id="content">
<div id="child">
vertical-align:middle;
</div>
</div>
小结:
以上代码本人是在chrome下做的测试,可能有些在ie下会有问题,使用时请注意。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
Flexbox实现一个div元素在body页面中水平垂直居中:XML/HTMLCode复制内容到剪贴板Flexbox制作CSS布局实现水平垂直居中html{he
本CSS教程提供了两种对齐方式即垂直居中对齐和底端对齐!更多内容请参考本站的CSS视频教程。CSS使图片垂直居中的代码:图片垂直居中div,img{margin
本文介绍了CSS居中实例之大小不固定的图片居中方法,分享给大家,具体如下:1.利用table-cell实现垂直居中[站外图片上传中…&hellip
水平位置居中可以使用CSS属性text-align来控制。 text-align:center;//文本居中 如果需要文字垂直位置居中解决方法一般使用设
CSS的居中有水平居中和垂直居中,这两种居中又分为行内元素居中和块级元素居中,不同的居中用不同方法。水平居中1、行内元素水平居中(文本,图片)给父层设置text