CSS-元素居中显示的方法

页面布局如下：

    
内部元素

[元素已知高度和宽度]

方法一 ：设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

.outer{
    width:500px;
    height: 400px;
    margin:0 auto;
    background: pink;
    position: relative;
}
.inner{
    width:100px;
    height: 100px;
    background: yellow;
    position: absolute;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left:-50px;
}

方法二：设置父元素为相对定位，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

.outer{
    width:500px;
    height: 400px;
    margin:0 auto;
    background: pink;
    position: relative;
}
.inner{
    width:100px;
    height: 100px;
    background: yellow;
    position: absolute;
    top:0;
    right:0;
    left:0;
    bottom:0;
    margin:auto;
}

元素未知宽度和高度

方法一：使用定位属性，设置父元素为相对定位，给子元素设置绝对定位，left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

• Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
• translate(x,y):元素在水平方向和垂直方向同时移动;

.outer{
    width:500px;
    height: 400px;
    margin:0 auto;
    background: pink;
    position: relative;
}
.inner{
    background: yellow;
    position: absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
        

方案二：使用flex布局实现:设置父元素为flex定位，justify-content: center; align-items: center;

• justify-content:属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线(横轴)对齐。
• align-items 属性应用在弹性容器上，设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。

.outer{
    width:500px;
    height: 400px;
    margin:0 auto;
    background: pink;
    display: flex;
    justify-content: center;
    align-items: center;
}
.inner{
    background: yellow;
}

方案三：使用flex布局实现:设置父元素为flex定位，子元素设置margin: auto;

.outer{
    width:500px;
    height: 400px;
    margin:0 auto;
    background: pink;
    display: flex;
}
.inner{
    background: yellow;
    margin:auto;
}