网页制作中垂直居中的技巧

在实际的网页制作过程中，网页中有很多的东西需要我们进行垂直居中，例如文字垂直居中，多行文字垂直居中，块级元素垂直居中，背景图片垂直居中。今天我就给大家来说一下应该怎样对这些东西进行垂直居中。
1.单行文字垂直居中。单行文字居中的方法其实很简单，只需要在css中给对应的父标签设置line-height为父级标签的高度就可以实现对单行文字的垂直居中了。而图片也是属于行内元素，别看
它可以设定固定的宽高，line-height对img标签也是有影响的，所以在需要对img标签垂直居中的时候是可以使用line-height的，如果不需要line-height影响到img标签的话，可以给img标签
设置为block，然后使用浮动属性就可以了。
2.多行文字垂直居中 多行文字垂直居中需要给每一行的文字上包一个行内快元素，或者包一个别的元素设置成行内块就可以了。再给行内快的父元素设置line-height，而行内快元素设置宽高和里面的行高就可以了。
3.块级元素居中。块级元素居中需要给这个块级元素的父级设置相对定位属性，然后给需要垂直居中的块级元素设置绝对定位，top或者bottom值为50%；margin-top是负的这个块级元素的高的一半就可以了。
4.背景图片垂直居中。在实际的网页制作工作中经常会用到背景图片，需要对背景图片垂直居中就需要用到background-position属性了，这个属性后面可以填写一个或者两个值，第一个值是水平方向上的定位，
而第二个值是垂直方向上的定位，起始点是元素的左上角。如果输入一个值得话，浏览器会认为水平方向和垂直方向上的值是一样的。想要垂直居中那么就给第二个值设为center，第一个值根据自己的需要来调试。
以上就是关于常用的垂直居中的使用技巧，根据不同的情况使用不同的方法可以大大提升开发效率。