html标签的垂直居中方法总结-唐朝资源网

以前一直被垂直居中的方法困扰。今天总结一下垂直居中增强记忆的方法

div等块级元素居中

第一种方法，使用绝对定位居中（相对于父容器）是使元素的绝对定位相对于父容器居中，要求块级元素的高度和宽度为确定（对于水平居中，需要确定宽度），然后将上下左右的值设置为零。，然后将边距设置为自动，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中测试</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;
        }
        #myBox {
            width: 500px;
            border: 1px solid black;
            background: #eee;
            color: #333;
            text-align: center;
        }
        div {
            height: 500px;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            position: absolute;
            margin: auto;
        }
    </style>
</head>
<body>
    <div id="myBox">
        我是测试
    </div>
</body>
</html>

效果如下：

如果只需要垂直居中，可以确定div的宽度，外边距的值设置为：auto 0；去掉div左右其他的值，代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中测试</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            position: absolute;
            top: 0;
            bottom: 0;
            margin: 0 auto;
        }
        #myBox {
            width: 500px;
            border: 1px solid black;
            background: #eee;
            color: #333;
            text-align: center;
        }
        div {
            height: 500px;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            position: absolute;
            margin: auto;
        }
    </style>
</head>
<body>
    <div id="myBox">
        我是测试
    </div>
</body>
</html>

效果如下：

当高度确定后，也可以使用css3的flex属性配置居中。只需在需要居中的元素的父容器中设置： : flex;对齐项目：;就是这样，如果你想将它水平居中并添加 -: ;代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中测试</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            display: flex;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            border: 1px solid red;
            text-align: center;
            align-items: center;
            justify-content: center;
        }
        #myBox {
            width: 500px;
            border: 1px solid black;
            background: #eee;
            color: #333;
        }
        div {
            height: 500px;
        }
    </style>
</head>
<body>
    <div id="myBox">
        我是测试
    </div>
</body>
</html>

效果如下：

该方法是css3的新属性，如果要兼容不支持该属性的浏览器，请不要使用。

如果你要制作的div是弹窗之类的东西，宽度和高度是不确定的，需要垂直和水平居中。这更简单。目前只找到一种方法。父容器设置：flex;居中元素设置：自动；就是这样，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>垂直居中测试</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            display: flex;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
            border: 1px solid red;
        }
        #myBox {
            display: inline-block;
            border: 1px solid black;
            background: #eee;
            color: #333;
            margin: auto;
        }
    </style>
</head>
<body>
    <div id="myBox">
        <p>我是测试</p>
        <p>我是测试</p>
        <p>我是测试</p>
        <p>我是测试</p>
    </div>
</body>
</html>

效果如下：

此方法也只适用于支持 CSS3 的浏览器。

本站下载的源码均来自公开网络收集转发二次开发而来，若侵犯了您的合法权益，请来信通知我们1413333033@qq.com，我们会及时删除，给您带来的不便，我们深表歉意。下载用户仅供学习交流，若使用商业用途，请购买正版授权，否则产生的一切后果将由下载用户自行承担，访问及下载者下载默认同意本站声明的免责申明，请合理使用切勿商用。

THE END