图片在 DIV 中垂直居中
<div class="notice-image">
<img src="./images/news_title.jpeg" alt="">
</div>
.notice-image {
height: 55px;
line-height: 55px;
}
.notice-image > img {
vertical-align: middle;
}
DIV 和超链接文字垂直居中
<div class="resource-link">
<div>术</div>
<a href="#">更多></a></a>
</div>
section .resource-link div {
width: 32px;
height: 32px;
font-size: 18px;
display: inline-block;
text-align: center;
line-height: 32px;
}
section .resource-link a {
display: inline;
font-size: 16px;
color: #748992;
}
水平垂直居中
.footer-left > div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
子元素垂直居中
已知父元素高度通过 transform 实现 CSS 垂直居中。
给子元素的 position:relative,再通过 translateY 即可定位到垂直居中的位置。
<div class="tips">
<div>
<div>
<div><img src="./images/icon-msg.png" alt=""></div>
<div>联系客服</div>
</div>
</div>
</div>
.tips > div {
width: 80px;
height: 80px;
border: 1px solid #e7e7e7;
margin: 0px -1px -1px 0px;
text-align: center;
}
.tips > div > div {
position: relative;
top: 50%;
transform: translateY(-50%);
}
一个 DIV 在另一个 DIV 垂直居中
<div class="link-container">
<div class="link-left">术</div>
<div class="link-right">
<div>技术资源库</div>
<div>1456</div>
</div>
<div>
.link-container {
width: 130px;
height: 50px;
line-height: 50px;
margin: 0 20px;
position: relative;
}
.link-left {
position: absolute;
margin: auto;
top: 0;
right: 10;
bottom: 0;
left: 0;
color: #000;
border: 2px dashed #ff6633;
border-radius: 50%;
width: 38px;
height: 38px;
text-align: center;
line-height: 38px;
font-size: 20px;
}
.link-right {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 20;
}
更多精彩内容:各种AI课程、技能课程、黑科技软件、网站小程序源码、副业小项目、PPT模板等精品素材、电商课程、推广引流课程等,尽在 天边资源网 。