Flex体验

传统方式布局

传统通过定位方式让盒子水平垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex初体验</title>
    <style>
        /*公共样式*/
        .container {
            width: 300px;
            height: 200px;
            outline: 2px dashed red;
        }
        .item {
            width: 150px;
            height: 100px;
            outline: 2px dashed green;
            /*文字水平居中*/
            text-align: center;
            /*设置行高与盒子一样后，文字可以垂直居中*/
            line-height: 100px;
        }
        .container.traditon {
            position: relative;
        }
        .item.traditon {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
    </style>
</head>
<body>
    <div class="container traditon">
        <div class="item traditon">传统布局</div>
    </div>
</body>
</html>

使用flex弹性盒子布局

通过几句代码即可让盒子可以快速的水平垂直居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex初体验</title>
    <style>
        /*公共样式*/
        .container {
            width: 300px;
            height: 200px;
            outline: 2px dashed red;
        }
        .item {
            width: 150px;
            height: 100px;
            outline: 2px dashed green;
            /*文字水平居中*/
            text-align: center;
            /*设置行高与盒子一样后，文字可以垂直居中*/
            line-height: 100px;
        }
        .container.traditon {
            /*转为弹性盒子*/
            display: flex;
            /*设置弹性盒子在水平和垂直方向上的对其方式*/
            justify-content: center;
            align-items: center;
        }
        .item.traditon {
        }
    </style>
</head>
<body>
    <div class="container traditon">
        <div class="item traditon">传统布局</div>
    </div>
</body>
</html>