1. 程式人生 > >WEBKIT BOX 實現水平垂直居中

WEBKIT BOX 實現水平垂直居中

display: -webkit-box;  使用flexbox 佈局

  -webkit-box-pack: center;  實現容器內容垂直居中

  -webkit-box-align: center;  實現容器內的內容水平居中

     -webkit-box-orient: vertical; 容器內的元素垂直排列

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

            height: 1000px;

            display: -webkit-box;

            -webkit-box-orient: vertical;

            -webkit-box-align: center;

            -webkit-box-pack: center;

        }

    </style>

</head>

<body>

<div class="container">

    <div>第一個DIV</div>

    <div>第二個DIV</div>

</div>

</body>

</html>