div中內容左右垂直居中小结

日期:2021-03-06 类型:科技新闻 

关键词:h5平台,手机端网页,手机端网页模板,免费的h5场景制作平台,h5制作工具

尽管div中內容左右垂直居中的难题早已是1个较为古老的话题,可是近期发现還是有许多前端开发开发设计者在了解怎样完成。实际上互联网上早已有许多材料和实例了,我这里再总结1下几个较为普遍的解决方法。

情况1:div限高,內容长度限1行


拷贝编码
编码以下:

<style>
.v-align {
margin: 0 auto;
width: 200px;
height: 80px;
text-align: center;
line-height: 80px;
border: 1px solid #ddd;
}
</style>
<!-- html -->
<div class="v-align">我的內容只能有1行。</div>

情况2:div限高,內容不限


拷贝编码
编码以下:

.v-mult {
margin: 0 auto;
width: 200px;
height: 100px;
border: 1px solid #ddd;
overflow: hidden;
}
.v-mult .empty,
.v-mult .text {
display: inline-block;
*display: inline;
*zoom: 1;
vertical-align: middle;
}
.v-mult .empty {
height: 100%;
}
<!-- html -->
<div class="v-mult">
<span class="empty"></span>
<span class="text">我的內容不限,多高都行
换行仍旧</span>
</div>

情况3:div高宽比不确定,內容高宽比1定


拷贝编码
编码以下:

.v-auto {
position: relative;
margin: 0 auto;
width: 200px;
border: 1px solid #ddd;
}
.v-auto .text {
position: absolute;
top: 50%;
margin-top: ⑸0px;
height: 100px;
border: 1px dashed #ddd;
}
<!-- html -->
<div class="v-auto">
<div class="text">
我的高宽比是固定不动的,仅有100px高,可是我的父及高宽比不确定,我如何竖直垂直居中呢?
</div>





</div>

情况4:div高宽比不确定,內容高宽比不确定


拷贝编码
编码以下:

.v-auto-out {
position: relative;
margin: 0 auto;
width: 200px;
border: 1px solid #ddd;
}
.v-auto-out .auto-in {
position: absolute;
top: 50%;
border: 1px dashed #ddd;
/* 这里有适配性难题 */
-webkit-transform: translateY(⑸0%);
-ms-transform: translateY(⑸0%);
-o-transform: translateY(⑸0%);
transform: translateY(⑸0%);
}
<!-- html -->
<div class="v-auto-out">
<div class="auto-in">我的高宽比不确定,我的父及高宽比也不确定,这下要左右垂直居中,该怎样是好?大家1起来瞧瞧吧。</div>





</div>

好了,了解这4种方法,我坚信足以解决平常工作中中的各种各样竖直垂直居中难题。编码很简易,已不做过剩论述。总而言之1句话,CSS的各个特性款式,就仿佛人身体的各个人体器官,掌握了各个人体器官的作用,才可以互相相互配合进行各种各样每日任务。相反,个人的工作能力是比较有限的。