html竖直表单CSS 垂直居中办法汇总

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height高度同等来实现的。
如下代码：

<div class="container">hi,imooc!</div>

css代码：

<style> .container{ height:100px; line-height:100px; / 仅能用于单行文本 / background:#999;}</style>

垂直居中-图片以及行内块元素

html竖直表单CSS 垂直居中办法汇总 jQuery

<div class="container"><img src="imgegs/icon.png" /></div>

css代码：

<style>.container{ height:100px; background:#999;}.container img{ vertical-align:middle;}</style>

垂直居中-父元素高度确定的多行文本(方法一)

父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种：

方法一：利用插入table(包括tbody、tr、td)标签, 同时设置vertical-align：middle。

说到竖直居中,css中有一个用于竖直居中的属性vertical-align,但这个样式只有在父元素为td 或th时,才会生效。
以是又要插入table标签了。

下面看一下例子：

html代码：

<body><table><tbody><tr><td class="wrap"><div><p>看我是否可以居中。 </p><p>看我是否可以居中。 </p><p>看我是否可以居中。 </p><p>看我是否可以居中。 </p><p>看我是否可以居中。 </p></div></td></tr></tbody></table></body>

css代码：

table td{height:500px;background:#ccc}

由于td标签默认情形下就默认设置了vertical-align为middle, 以是我们不须要显式地设置了。

垂直居中-父元素高度确定的多行文本(方法二)

在chrome、firefox及IE8以上的浏览器下可以设置块级元素的display为table-cell, 激活vertical-align属性, 但把稳IE6、7并不支持这个样式。

html代码：

<div class="container"><div><p>看我是否可以居中。 </p><p>看我是否可以居中。 </p><p>看我是否可以居中。 </p><p>看我是否可以居中。 </p><p>看我是否可以居中。 </p></div></div>

css代码：

<style>.container{ height:300px; background:#ccc; display:table-cell; /IE8以上及Chrome、Firefox/ vertical-align:middle; /IE8以上及Chrome、Firefox/}</style>

这种方法的好处是不用添加多余的无意义的标签,但缺陷也很明显,它的兼容性不是很好,不兼容 IE6、7。

垂直居中--方法三

<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><style type="text/css">{ margin: 0; padding: 0;}div{ width: 400px; height: 300px; background-color: orange;}/ 思路一：left:50%;top:50%;margin-left: -200px;margin-top: -150px; 思路二：left:0;top:0;right:0;bottom:0;margin:auto; /div{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); / 平移 /}</style></head><body><div></div></body></html>

实例1:将内层div的文本垂直居中

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>父元素高度确定的多行文本</title><style>.container{ height:300px; background:#ccc; display:table-cell; /IE8以上及Chrome、Firefox/ vertical-align:middle; /IE8以上及Chrome、Firefox/}</style></head><body><div class="container"><div><p>看我是否可以居中。 </p><p>看我是否可以居中。 </p><p>看我是否可以居中。 </p><p>看我是否可以居中。 </p><p>看我是否可以居中。 </p></div></div></body></html>

实例2：将内层垂直居中、外层水平居中

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style type="text/css">#content{ width:300px; height:300px; border:#000 solid 1px; margin:auto; display:table;}#wenzi{ border:#F00 solid 1px; text-align:center; display:table-cell; vertical-align: middle;}</style></head><body><div id="content"><div id="wenzi">锄禾日当午，<br>汗滴禾下土。 <br>谁知盘中餐，<br>粒粒皆辛劳。 <br></div></div></body></html>

实例3: 利用绝对定位垂直居中

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style type="text/css">{ margin: 0; padding: 0;}div{ width: 220px; height: 280px; background: url("img/王思聪.jpg"); position: absolute; left: 50%; top: 50%; margin-left: -110px; margin-top: -140px;}</style></head><body><div></div></body></html>

实例4: 利用绝对定位垂直居中

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>Document</title><style type="text/css">{ margin: 0; padding: 0;}div{ width: 600px; height: 200px; padding: 10px 20px; border: 1px solid #000; border-radius: 5px; / 下面这种写法也可以让一个盒子居中 / position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto;}</style></head><body><div>您确定删除：重庆万州公交坠江事宜结果公布后，司乘轇轕和公交驾驶安全问题成为人们热议的焦点，如何预防和避免恶性结果的发生，才是问题的关键。 “鼓励市民举报，并对勇于制止滋扰公交车正常行驶违法行为的公民予以褒奖。 ”昨日下午，西安市公安局公共交通分局召开媒体通气会，通报西安干系安全举措。这条吗</div></body></html>

绝对定位(固定定位)之后, 所有标准流的规则, 都不适用了。
以是margin:0 auto; 失落效。

办理办法：left:50%; margin-left:负的宽度的一半。
（三句话）

div{width: 600px;height: 60px;position: absolute; / → 第一句 /left: 50%; // / → 第二句 /top: 0;margin-left: -300px; /→ 第三句。宽度的一半/}

实例4：利用绝对定位和margin:auto垂直居中