CSS实现DIV的水平与垂直居中
使用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>执行结果：
CSS实现DIV的水平与垂直居中相关推荐
- 学习使用CSS实现div中的内容垂直居中的方法
学习使用CSS实现div中的内容垂直居中的方法 一.行高(line-height)法 二.内边距(padding)法 三.模拟表格法 四.CSS3的transform来实现 五:css3的box方法实 ...
- css设置标签的水平与垂直居中，定位与弹性盒布局的的结合
在一般情况下利用css在对标签进行水平与垂直居中的时候利用弹性盒布局可以轻易解决,只需设置父级标签的主轴与交叉轴居中即可,代码如下: <!DOCTYPE html> <html> ...
- CSS实现div盒子水平垂直居中的方式
网上看到有很多方式,这里记录一下我用起来顺手的几种方式,这里敲黑板做笔记,哈哈~~ <div id='container'><div class='middle'></d ...
- CSS总结div中的内容垂直居中的五种方法
一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...
- CSS总结div中的内容垂直居中的四种方法
一.行高(line-height)法 如果要垂直居中的只有一行或几个文字,那它的制作最为简单,只要让文字的行高和容器的高度相同即可,比如: p { height:30px; line-height:3 ...
- css使div元素水平并垂直的方法（4种）
这里以一个120x120的div块状物体做测试 法1: position:absolute; left:0;top:0;right:0;bottom:0; margin:auto 法2: positi ...
- DIV或者DIV里面的图片水平与垂直居中的方法 - 站住，别跑 - 博客园
DIV或者DIV里面的图片水平与垂直居中的方法 <div class="box"><img /> </div> 水平居中的常用方式: text- ...
- html实现水平垂直居中,HTML技巧篇：实现元素水平与垂直居中的几种方式
如何使用html+css实现元素的水平与垂直居中效果,这也是我们网页在编码制作中会经常用到的问题. 1)单行文本的居中 主要实现css代码: 水平居中:text-align:center;垂直居中:l ...
- div的水平居中和垂直居中
div是html中的一个标签,一般称之为盒子.有宽度.有高度,是可以存放内容的一个区域.但是如何让div在页面上以水平或者垂直的方式居中呢? 1.div水平居中 div水平居中其实很简单,只要使用到m ...
最新文章
- Java加密算法 AES
- 中国人民大学_《组织行为学》_17.节点人物
- mysql 中 add2_计算器中的F，4，2，0，ADD2怎么调,MU键有什么用？？急急急
- 【Redis】新浪微博与微信Redis架构实战 - 笔记
- 谷歌浏览器 检查功能_谷歌Chrome浏览器添加新功能，爱”吃“内存有应对之策？...
- Make GNN Great Again: GNN 上的预训练和自监督学习
- poj 2606 Rabbit hunt 解题报告
- QTP11的下载地址和破解教程
- 在云测平台对手机进行兼容性测试
- win8删除计算机管理员权限,win8.1系统如何删除administrator账户
- JS的垃圾回收机制是什么
- nittest html报告,学业水平测评复习nit3-5.doc
- 设计一个形状类(接口)Shape,方法:求周长和求面积形状类(接口)的子类(实现类):
- 计算机系统论文摘要,计算机系统结构论文摘要怎么写 计算机系统结构论文摘要范文参考...
- SQL Server数据库安全规划全攻略（转）
- 手写了一个简单的JSON解析器，网友直乎：牛！
- matlab norm函数使用_matlab中norm函数的用法
- 公有云上基于微服务架构SAAS产品研发实践「活动通知」
- 智能座舱仪表自动化测试的实现原理
- 聊聊呗|扫雷书单？市文化执法大队开展“护苗2020”之“扫雷”行动