html標籤的垂直居中方法總結

時間 2019-11-20

標籤 html 標籤垂直居中方法總結欄目 HTML 简体版

原文原文鏈接

之前老是被垂直居中的方法所困擾，今天來總結一下垂直居中的方法，加強記憶css

div等塊級元素居中html

　　第一種方法，利用絕對定位居中（相對於父容器），就是要居中的元素相對父容器作一個絕對定位，要求塊級元素的高度和寬度肯定（水平居中則要求寬度肯定），而後設置上下左右數值都爲零，再設置外邊距爲自動就能夠了，代碼以下：css3

<!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>

效果以下：flex

在高度肯定的狀況下，還能夠利用css3的flex屬性處置居中。就是在須要居中的元素的父容器裏面設置：display：flex;align-items: center;就能夠了，若是還想水平居中加上justify-content：center;代碼：spa

<!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>

效果以下：code

這個方法是css3的新屬性，若是要兼容不支持該屬性的瀏覽器不要使用。htm

若是想作的div是個彈窗之類的東西，寬度高度都不肯定，還要垂直水平居中，這個更簡單，目前只發現一種辦法，父容器設置display: flex;要居中的元素設置margin： auto；就好了，代碼以下：blog

<!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>