html标签的垂直居中方法总结

Posted zhangbob

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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的宽度可以不确定，外边距的值设置成margin：auto 0；去掉div的right和left其他值不变，代码：

<!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属性处置居中。就是在需要居中的元素的父容器里面设置：display：flex;align-items: center;就可以了，如果还想水平居中加上justify-content：center;代码：

<!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是个弹窗之类的东西，宽度高度都不确定，还要垂直水平居中，这个更简单，目前只发现一种办法，父容器设置display: flex;要居中的元素设置margin： auto；就行了，代码如下：

<!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的浏览器。

以上是关于html标签的垂直居中方法总结的主要内容，如果未能解决你的问题，请参考以下文章

CSS让图片垂直居中的几种技巧

如何使文字在div中水平和垂直居中的css代码

css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中

【html】 a标签内的文字垂直居中对齐问题

css html 如何将图片img标签 水平居中 垂直居中 和水平垂直居中

总结div里面水平垂直居中的实现方法