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

Posted 2020-09-21 Lu_Lu的攻城路

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了水平垂直居中的——万能好用方法相关的知识，希望对你有一定的参考价值。

一、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;
}

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

效果

以上是关于水平垂直居中的——万能好用方法的主要内容，如果未能解决你的问题，请参考以下文章

浅谈positiontable-cellflex-box三种垂直（水平）居中技巧

前端面试CSS系列——DIV垂直水平居中

css常用代码片段 (更新中)

如何使文字在div中水平和垂直居中的css代码

android 代码中设置控件的垂直居中和两个控件之间的距离。