水平垂直居中的——万能好用方法

一、absolute方法

HTML代码如下：

<body>
        <div id="box">
            <div class="circle left"></div>
            <div class="circle right"></div>
        </div>
</body>

css如下：

#box{
             400px;
            height: 200px;
            background: #ccc;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            overflow: hidden;
        }

box是子元素，box相对于body垂直水平居中，只要在box添加以上代码就可以了

二、display：flex

css如下：

body{
    height: 100vh;
    display: flex;
     justify-content: center;
     align-items: center;   

}
        
#box{
     400px;
    height: 200px;
    background: #ccc;
        position: relative;
}

在父元素上加以上代码就可以使元素自适应的居中

效果

查看全文

相关阅读:
hdu 4563
CPU中的主要的寄存器
 ROC曲线及AUC
light oj 1231 dp 多重背包
 light oj 1422 区间dp
light oj 1098 数学规律
 light oj 1095 组合数学
 DRAM & SRAM
C-static
C-枚举

原文地址：https://www.cnblogs.com/feilu2016/p/6941838.html