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>

p>

效果如下:

该方法是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 的浏览器。

© 版权声明
THE END
喜欢就支持一下吧
点赞169赞赏 分享
相关推荐
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容