CSS实现DIV的水平与垂直居中

最新推荐文章于 2023-04-03 16:21:54 发布

pan_junbiao

最新推荐文章于 2023-04-03 16:21:54 发布

阅读量8.9k

点赞数 5

分类专栏：我の原创 CSS3 文章标签： CSS 水平居中垂直居中

本文链接：https://blog.csdn.net/pan_junbiao/article/details/92834300

版权

我の原创同时被 2 个专栏收录

512 篇文章 27 订阅

订阅专栏

CSS3

14 篇文章 1 订阅

订阅专栏

使用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>

执行结果：