css图⽂上下居中,CSS垂直居中的6种⽅法
垂直居中⼀直是CSS布局中⽐较令⼈头疼的问题，相⽐于⽔平居中，垂直居中对于不同的元素类型需要采取截然不同的策略，因此常常会因为策略的误⽤导致⽆法成功居中。这篇⽂章总结了垂直居中的6种常见策略。
Vertical-Align
切记 vertical-align 只对 table-cell 以及 inline-element 起作⽤，vertical-align 的值是相对于其⽗元素的，⽗元素必须是⾏内元素。
对于⼀⾏⽂字来讲，该属性的值是相对于⾏⾼(line-height)的。
对于 table-cell，该属性的值是相对于表格的⾏⾼的。
vertical-align 对于块级元素不起作⽤，例如我们⽆法⽤它去垂直居中⼀个div中的p元素，因此这个⽅法通常不是垂直居中的最优选择。
Line-Height ⽅法
这个⽅法适⽤于单⾏⽂字的垂直居中，只需要将包含⽂字元素的容器⾏⾼设置为⼤于字体⼤⼩并且等于元素的⾼度。默认情况下，⽂字上下部分会留有相同的空间，因⽽实现了⽂字的垂直居中。
html
Text here
css
#child {
line-height: 200px;
}
这种⽅法只适⽤于单⾏⽂字的垂直居中，如果需要多⾏⽂字居中，需要选择其他⽅法。
使⽤ Line-Height 垂直居中图⽚
使 line-height 可以实现图⽚的垂直居中，只需要在包含图⽚的⽗元素上设置 line-height 然后为图⽚设置 vertical-align: middle。
css设置文字垂直居中html
css
#parent {
line-height: 200px;
}
#parent img {
vertical-align: middle;
}
CSS表格法
之前已经提到 vertical-align 适⽤于 table-cell, 因此可以通过将元素转化为table来实现垂直居中。
html
Text here
css
#parent {
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
注意这种⽅法的好处在于⽀持内容的动态改变，缺点是不⽀持旧版的IE浏览器(<=IE7)。
绝对定位和负边距法
这种⽅法适⽤于块级元素，需要设置元素的⾼度。
下⾯的代码同时实现了⼦元素的⽔平和垂直居中：
html
Content here
css
#parent {
position: relative
}
#child {
position: absolute;
top: 50%;
left: 50%;
height: 30%;
width: 50%;
margin: -15% 0 0 -25%;
}
这种⽅法利⽤绝对定位先将元素的上边界和左边界移动到50%的位置，再根据元素的尺⼨调整负边距以达到居中的效果。
这种⽅法适⽤于所有浏览器，但是由于需要预先设定元素⾼度，因此可能出现内容超出容器的情况。
绝对定位和拉伸法
和上⼀种⽅法⼀样，这种⽅法也需要将需要居中的元素设置绝对定位，并预先指定⾼度和宽度。不过在具体实现思想上有所不同。html
Content here
css
#parent {
position: relative
}
#child {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
height: 30%;
width: 50%;
margin: auto;
}
这个⽅法的原理是使⼦元素有拉伸到容器边界的“趋势”，但由于⼦元素设置了⾼宽，因此⽆法拉伸。同时因为设置了 margin: auto，意味着相对⽅向的外边距相等，因此元素被“挤”到了容器的中央。
和上⼀种⽅法⼀样，这种⽅法的⼦元素内容也可能超出容器。
上下内边距(padding)相等法
这种⽅法通过设置上下padding相等来实现垂直居中。
html
Content here
css
#parent {
padding: 5% 0;
}
#child {
padding: 10% 0;
}
上⾯的代码使⽤了相对尺⼨，然⽽如果需要指定元素尺⼨时，就需要使⽤绝对尺⼨并做⼀个简单的计算了。例如，如果指定⽗元素⾼度为400px，⼦元素⾼度为100px，要实现垂直居中需要设置⽗元素的上下padding为150px。
浮动元素法
这个⽅法的原理是利⽤⼀个空的浮动元素来控制主要内容在容器中的位置。
html
Content here
css
#parent {
padding: 5% 0;
}
#floater {
float: left;
height: 50%;
width: 100%;
margin-bottom: -50px;
}
#child {
clear: both;
height: 100px;
}
这个浮动元素可以向任意⽅向浮动，设置⾼度为50%，同时利⽤margin-bottom使该元素上移，上移⾼度为主要内容元素⾼度的⼀半。为了使内容元素移动到浮动元素下⽅，还需要为该元素设置 clear: both。
这种⽅法同样适⽤于所有浏览器，缺点是需要提前知道内容元素的⾼度。

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