css系列之左右+垂直布局（传统和flex）

传统垂直布局

• 知识点：position的fixed和absolute会脱离文档流，而relative不会。

1、脱离文档流，相对于父元素布局fixed/absolute

• 使用了css3的transform，注意兼容性

 <div class="center"></div>

<style>
        .center {
            position: fixed;
            top: 50%;
            left: 50%;
            background-color: #000;
            width: 50%;
            height: 50%;
            -webkit-transform: translateX(-50%) translateY(-50%);
        }
    </style>

flex布局

• 注意：父元素一定要有明确的width和height
• 使用flex，注意兼容性

<div class="f">
    <div class="s"></div>
</div>

html,body{
            width: 100%;
            height: 100%;
        }
        .f {
            width: 100%;
            height: 100%;
            justify-content: center;
            align-items: center;
            display: flex;
        }
        .s{
            width: 100px;
            height: 100px;
            background: red;
        }