span居中_H5元素的⽔平垂直居中布局总结
1，块级元素设置height和line-height或者text-align: center，可以让块级元素包裹的内联元素或者⾃⾝⽂本内容垂直居中或者⽔平居中；但是对包裹的块级元素和浮动元素不起作⽤。
2，块级元素包裹块级元素，设置被包裹元素margin: 0 auto达到⽔平居中，但是设置⽗元素的height和line-height或者⼦元素的vertical-align: middle不起作⽤，因为vertical-align: middle只对⾏内元素有效。总结设置⼦元素垂直居中有以下⼏种⽅法：
2.1，设置块级⼦元素display: inline-block
<div class="btn-container">
<div class="btn-content"></div>
</div>
.btn-container {
width: 100%;
height: 40px;
background-color: red;
line-height : 40px;
text-align: center;
font-size: 0px;
}
.btn-content {
display: inline-block;
width: 100px;
height: 30px;
vertical-align: middle;
background-color: green;
}
注意⼀定要设置⽗元素font-size: 0px。这是因为vertical-align: middle默认是和⽗元素的基线居中对齐，⽗元素的基线可以假想为字母x 的底边，只有设置⽗元素font-size: 0px，才能将⽗元素的基线调整到中间，达到⼦元素在⽗元素中垂直居中的⽬的。
设置之前：
设置之后：
2.2，⽗块级元素包裹两个属性值为display: inline-block的⼦元素，并且有⼀个⼦元素的⾼度为100%，并且两个⼦元素都设置vertical-align: middle，达到另⼀个⼦元素垂直居中：
<div class="btn-container">
<span class="btn-text">客户端</span>
<div class="btn-content"></div>
</div>
.btn-container {
width: 300px;
height: 40px;
background-color: red;
}
.btn-text {
display: inline-block;
height: 100%;
vertical-align: middle;
background-color: green;
}
.btn-content {
display: inline-block;
width: 100px;
height: 30px;
background-color: yellow;
vertical-align: middle;
}
渲染结果如下图所⽰：
注：该情况也适⽤于⼦元素为⼀张图⽚加⼀个块级元素的情况
2.3，设置⽗元素的padding-top为(⽗元素⾼度-⼦元素⾼度)/2div中的div居中
.btn-container {
width: 300px;
height: 40px;
background-color: red;
padding-top: 5px;
}
.btn-content {
width: 100px;
height: 30px;
background-color: green;
}
那是否可以设置⼦元素的margin-top来达到同样的效果呢，也可以，但是有风险。根据规范，⼀个盒⼦如果没有上补⽩(padding-top)和上边框(border-top)，那么这个盒⼦的上边距会和其内部⽂档流中的第⼀个⼦元素的上边距重叠。说⽩点就是，⽗元素的第⼀个⼦元素的上边距margin-top如果碰不到有效的border或者padding，就会不断⼀层⼀层向上，把⾃⼰的margin当⽗元素的margin执⾏。
2.4，设置⼦元素为绝对定位，有以下3种⽅法可以实现⽔平和垂直居中：
position: relative;
width: 300px;
height: 40px;
background-color: red;
}
//第⼀种⽅法
.btn-content {
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
margin: auto;
width: 100px;
height: 30px;
background-color: green;
}
/
/第⼆种⽅法
.btn-content {
position: absolute;
left: 50%;
top: 50%;
margin-top: -15px;
margin-left: -50px;
width: 100px;
height: 30px;
background-color: green;
}
/
/第三种⽅法
.btn-content {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 30px;
background-color: green;
}
第⼆种⽅法必须知道⼦元素宽度和⾼度；如果不设置⼦元素尺⼨，第⼀种⽅法⼦元素尺⼨会和⽗元素⼀致，第三种⽅法会和⼦元素中包裹的内容⼀致；
2.5，使⽤flex弹性布局，弹性容器的每个⼦元素都变成⼀个弹性元素，⽽且是以相同⽅式布局的。不管是段落还是span元素，都变成弹性元素。
以2.2节为例:
width: 300px;
height: 40px;
background-color: red;
display: flex;
align-items: center;
}
.btn-text {
height: 100%;
background-color: green;
}
.btn-content {
width: 100px;
height: 30px;
background-color: yellow;
}
可以看到弹性布局简单很多，所以h5布局中能⽤弹性布局的地⽅我们都应该尽量⽤弹性布局，在界⾯适配⽅⾯弹性布局也有⼀定的优势。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。