网站设计中垂直居中的方法

在实质的网站设计过程中，网页中有不少的东西需要大家进行垂直居中，比如文字垂直居中，多行文字垂直居中，块级元素垂直居中，背景图片垂直居中。今天我就给大伙来讲一下应该如何对这类东西进行垂直居中。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，一个值依据我们的需要来调试。以上就是关于常见的垂直居中的用法方法，依据不一样的状况用不一样的办法可以大大提高开发效率。

标题名字网站设计中垂直居中的方法