使用CSS样式实现DIV的水平与垂直居中。
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 代替。
定义：
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"。
定义：
text-align 属性规定元素中的文本的水平对齐方式。
该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。通过允许用户代理调整行内容中字母和字之间的间隔，可以支持值 justify；不同用户代理可能会得到不同的结果。
可能的值：
| 值 | 描述 |
|---|---|
| left | 把文本排列到左边。默认值：由浏览器决定。 |
| right | 把文本排列到右边。 |
| center | 把文本排列到中间。 |
| justify | 实现两端对齐文本效果。 |
| inherit | 规定应该从父元素继承 text-align 属性的值。 |
注意：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
步骤：
（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>
定义：
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;
}利用定位属性（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>定位属性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>执行结果：
