html实现水平垂直居中,HTML技巧篇：实现元素水平与垂直居中的几种方式

如何使用html+css实现元素的水平与垂直居中效果，这也是我们网页在编码制作中会经常用到的问题。

1)单行文本的居中

主要实现css代码：

水平居中：text-align:center;垂直居中：line-height:XXpx; /*line-height与元素的height的值一致*/

我们先来看这样一个例子，加入我们这里有一个div，宽度和高度为300px，背景颜色为黑色，然后在div中有一行简短文字，我们只需要使用line-height:200px;就可以实现文字的居中效果，具体的代码如下所示：

由上图可以看出我们实现了单行文字的垂直居中效果，但是很多时候我们的文字并不知道具体有多少，可能有一行，也可能有很多行，那么遇到多行文字的这种问题我们要如何处理呢。