使用CSS样式实现DIV的水平与垂直居中。
1、使用<div>标签的 align 属性实现水平居中
HTML中的 <div> 标签的 align 属性用于规定 div 元素中的内容的水平对齐方式。所有浏览器都支持 align 属性。
语法：
<div align="value">属性值：
| 值 | 描述 |
|---|---|
| left | 左对齐内容。 |
| right | 右对齐内容。 |
| center | 居中对齐内容。 |
| justify | 对行进行伸展，这样每行都可以有相等的长度（就像在报纸和杂志中）。 |
示例：使用<div>标签的align属性实现页面内容水平居中。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录</title>
</head>
<body>
<div align="center">请输入登录信息<form method="post" name="form1"><table><tr><td>用户：</td><td><input name="user" style="width:200px" type="text"/></td></tr><tr><td>密码：</td><td><input name="password" style="width:200px" type="password"/></td></tr><!-- 以下是提交、取消按钮 --><tr><td><input type="submit" value="登录"/></td><td><input type="reset" value="取消"/></td></tr></table></form>
</div>
</body>
</html>执行结果：
注意：该方法虽然简单，但是存在兼容性问题，在 HTML 4.01 中，不赞成使用 div 元素的 align 属性；在 XHTML 1.0 Strict DTD 中，不支持 div 元素的 align 属性。请使用 CSS 代替。
2、使用CSS中 vertical-align 属性
2.1 CSS中 vertical-align 属性的介绍
定义：
vertical-align 属性设置元素的垂直对齐方式。所有浏览器都支持 vertical-align 属性。
说明：
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。
示例：垂直对齐一幅图像。
img { vertical-align:text-top; }可能的值：
| 值 | 描述 |
|---|---|
| baseline | 默认。元素放置在父元素的基线上。 |
| sub | 垂直对齐文本的下标。 |
| super | 垂直对齐文本的上标。 |
| top | 把元素的顶端与行中最高元素的顶端对齐。 |
| text-top | 把元素的顶端与父元素字体的顶端对齐。 |
| middle | 把此元素放置在父元素的中部。 |
| bottom | 把元素的顶端与行中最低的元素的顶端对齐。 |
| text-bottom | 把元素的底端与父元素字体的底端对齐。 |
| length | |
| % | 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 |
| inherit | 规定应该从父元素继承 vertical-align 属性的值。 |
注意：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
2.2 CSS中 text-align 属性的介绍
定义：
text-align 属性规定元素中的文本的水平对齐方式。
该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。
可能的值：
| 值 | 描述 |
|---|---|
| left | 把文本排列到左边。默认值：由浏览器决定。 |
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端对齐文本效果。 |
| inherit | 规定应该从父元素继承 text-align 属性的值。 |
注意：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
2.3 使用 vertical-align 属性实现DIV的水平与垂直居中
步骤：
（1）父div外层配置一个div，同时设置为表格元素 (display: table)，宽度为100%。
（2）父div配置为表格单元格元素 (display: table-cell)。
（3）父div配置居中属性（vertical-align: middle），使子div上下居中。
（4）子div通过margin配置左右居中（margin-left:auto; margin-right:auto）。
示例：使用 vertical-align 属性实现DIV的水平与垂直居中。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用 vertical-align 属性实现DIV的水平与垂直居中</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.warp {display: table;width: 100%;}.father {display: table-cell;vertical-align: middle;}.son {margin: auto;}</style>
</head>
<body>
<div class="warp"><div class="father" style="width: 100%; height: 500px; border: 1px solid rebeccapurple;"><div class="son" style="width: 300px; height: 100px; border: 1px solid rebeccapurple;"><h3 style="text-align: center">请输入登录信息</h3><form method="post" name="form1"><table><tr><td>用户：</td><td><input name="user" style="width:200px" type="text"/></td></tr><tr><td>密码：</td><td><input name="password" style="width:200px" type="password"/></td></tr><!-- 以下是提交、取消按钮 --><tr><td><input type="submit" value="登录"/></td><td><input type="reset" value="取消"/></td></tr></table></form></div></div>
</div>
</body>
</html>
3、绝对定位
3.1 CSS中 position 属性的介绍
定义：
position 属性规定元素的定位类型。
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
可能的值：
| 值 | 描述 |
|---|---|
| absolute | 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed | 生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative | 生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
示例：定位 h2 元素。
h2 {position:absolute;left:100px;top:150px;
}3.2 绝对定位（方式一）
利用定位属性（top、left、right、bottom）百分比的模式。若为100%，则代表偏移的长度为父div的高度（宽度）的100%。
步骤：
（1）父div标记下定位（position:relative|absolute|fixed）。
（2）子div绝对定位（position:absolute）。
（3）子div上下居中：top:50%;margin-top:-h/2 或是 bottom:50%;margin-bottom:-h/2。
（4）子div左右居中: left:50%;margin-left:-w/2 或是 right:50%;margin-right:-w/2。
示例：使用绝对定位（方式一）实现DIV的水平与垂直居中。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用绝对定位（方式一）实现DIV的水平与垂直居中</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.father {position: relative;}.son {position: absolute;bottom: 50%;margin-bottom: -80px;left: 50%;margin-left: -150px;}</style>
</head>
<body><div class="father" style="width: 100%; height: 500px; border: 1px solid rebeccapurple;"><div class="son" style="width: 300px; height: 160px; border: 1px solid rebeccapurple;"><h3 style="text-align: center">请输入注册信息</h3><form method="post" name="form1"><table><tr><td>用户：</td><td><input style="width:200px" type="text"/></td></tr><tr><td>密码：</td><td><input style="width:200px" type="password"/></td></tr><tr><td>昵称：</td><td><input style="width:200px" type="text"/></td></tr><tr><td>性别：</td><td><input style="width:200px" type="text"/></td></tr><!-- 以下是提交、取消按钮 --><tr><td><input type="submit" value="提交"/></td><td><input type="reset" value="取消"/></td></tr></table></form></div>
</div>
</body>3.3 绝对定位（方式二）
定位属性top和bottom（或是left和right）值分别设置为0，但子div有固定高度（宽度），并不能达到上下（左右）间距为0，此时给子div设置margin:auto会使它居中显示。
步骤：
父div标记下定位（position:relative|absolute|fixed|sticky）。
子div绝对定位（position:absolute）。
子div上下居中：top:0;bottom:0;margin-top:auto;margin-bottom:auto。
子div左右居中：left:0;right:0;margin-left:auto;margin-right:auto。
例子：使用绝对定位（方式二）实现DIV的水平与垂直居中。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用绝对定位（方式二）实现DIV的水平与垂直居中</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.father {position: relative;}.son {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto}</style>
</head>
<body>
<div class="father" style="width: 100%; height: 400px; border: 1px solid rebeccapurple;"><div class="son" style="width: 300px; height: 160px; border: 1px solid rebeccapurple;"><h3 style="text-align: center">请输入注册信息</h3><form method="post" name="form1"><table><tr><td>用户：</td><td><input style="width:200px" type="text"/></td></tr><tr><td>密码：</td><td><input style="width:200px" type="password"/></td></tr><tr><td>昵称：</td><td><input style="width:200px" type="text"/></td></tr><tr><td>性别：</td><td><input style="width:200px" type="text"/></td></tr><!-- 以下是提交、取消按钮 --><tr><td><input type="submit" value="提交"/></td><td><input type="reset" value="取消"/></td></tr></table></form></div>
</div>
</body>
</html>执行结果：
