div 水平垂直居中

Posted 2020-10-07 ycbeginner

已知布局为如下：

<div id="container">
    <p>test</p>
    <div id="center">12345</div>
</div>

不知道宽和高的情况下：

方法一：

#container{
            position:relative;
            background:blue;
        }
        #center{
            background:red;
            position:absolute;
            left:50%;
            top:50%;
            transform:translate(-50%,-50%);   //translate 是基于元素自身的尺寸来计算的
        }

方法二：

<div id="container">
    <!--<p>test</p>-->
    <div id="center">12345</div>
</div>

        #container{
            display:flex;
            align-items: center;
            justify-content: center;
            background:blue;
        }
        #center{
            background:red;
        }　　

固定宽和高

 

        #container{
            position:relative;
            width:300px;
            height:300px;
            background:blue;
        }
        #center{
            width:100px;
            height:100px;
            background:red;
            position:absolute;
            left:50%;
            top:50%;
            margin-top:-50px;
            margin-left:-50px;
        }

方法二

        #container{
            position:relative;
            width:300px;
            height:300px;
            background:blue;
        }
        #center{
            width:100px;
            height:100px;
            background:red;
            position:absolute;
            margin:auto;
            left:0;
            top:0;
            right:0;
            bottom:0;
        }