首页 > 代码库 > 水平垂直居中的——万能好用方法

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

2024-09-30 23:02:02   217人阅读

一、absolute方法

HTML代码如下：

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

css如下：

#box{
            width: 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{
    width: 400px;
    height: 200px;
    background: #ccc;
        position: relative;
}

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

 

效果

技术分享

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


联系
我们