垂直居中-父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height高度一致来实现的。如下代码：
css代码：
垂直居中-图片以及行内块元素
css代码：
垂直居中-父元素高度确定的多行文本(方法一)
父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：
方法一：使用插入table(包括tbody、tr、td)标签, 同时设置vertical-align：middle。
说到竖直居中,css中有一个用于竖直居中的属性vertical-align,但这个样式只有在父元素为td 或th时,才会生效。所以又要插入table标签了。
下面看一下例子：
html代码：
css代码：
因为td标签默认情况下就默认设置了vertical-align为middle, 所以我们不需要显式地设置了。
垂直居中-父元素高度确定的多行文本(方法二)
在chrome、firefox及IE8以上的浏览器下可以设置块级元素的display为table-cell, 激活vertical-align属性, 但注意IE6、7并不支持这个样式。
html代码：
css代码：
这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6、7。
垂直居中--方法三
实例1:将内层div的文本垂直居中
实例2：将内层垂直居中、外层水平居中
实例3: 使用绝对定位垂直居中
实例4: 使用绝对定位垂直居中
绝对定位(固定定位)之后, 所有标准流的规则, 都不适用了。所以margin:0 auto; 失效。
解决办法：left:50%; margin-left:负的宽度的一半。（三句话）
实例4：使用绝对定位和margin:auto垂直居中
发表评论