前端CSS垂直居中代码的几种方法

line-height 行高

适用于单行文本,不能应用于多行文本

设置子元素的line-height,用子元素的line-height撑开父元素

<div id="parent">
    <div id="child">Text here</div>
</div>

#child {
    line-height: 200px;
}

图片

父元素设置line-height ;子元素设置vertical-align:middle;

<div id=”parent”>
<img src=”image.png” alt=”” />
</div>

#parent {
line-height: 200px;
}
#parent img {
vertical-align: middle;
}

table

通用,父元素设置成table布局,子元素为table-cell

<div id=”parent”>
<div id=”child”>Content here</div>
</div>

#parent {
display: table;
height:200px
}
#child {
display: table-cell;
vertical-align: middle;
}

绝对定位和负margin(已知子元素高度)

<div id=”parent”>
<div id=”child”>Content here</div>
</div>

#parent {position: relative;height:200px;}
#child {
position: absolute;
top: 50%;
height: 100px;
margin-top: -50px;
}

绝对定位和transform(未知子元素高度)

<div id=”parent”>
<div id=”child”>Content here</div>
</div>.parent {
position: relative;
height:200px;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

上下padding相同

通用,上下设置相同的padding

<div id=”parent”>
<div id=”child”>Content here</div>
</div>#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}

————下载必看————

1、资源通过互联网渠道公开获取,仅供阅读测试,请在下载后24小时内删除,谢谢合作!
2、若版权方认为本站侵权,请联系发邮件至(rsstime@qq.com)处理。
3、本站解压密码统一为:yudouyudou

时光屋 » 前端CSS垂直居中代码的几种方法

发表评论

至臻视听_发烧收藏

会员介绍 常见问题