您现在的位置：首页 >> 前端 >> 内容

WEBKIT BOX实现水平垂直居中的代码教程

时间：2018/5/28 10:45:40 点击：

　　核心提示：display: -webkit-box; 使用flexbox 布局-webkit-box-pack: center; 实现容器内容垂直居中-webkit-box-align: center; 实现容...

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>

        .container {

            height: 1000px;

            display: -webkit-box;

            -webkit-box-orient: vertical;

            -webkit-box-align: center;

            -webkit-box-pack: center;

        }

    </style>

</head>

<body>

<p class="container">

    <p>第一个DIV</p>

    <p>第二个DIV</p>

</p>

</body>

</html>