css保持浮层水平垂直居中

最新推荐文章于 2022-06-22 19:43:31 发布

@拼命姑娘@

最新推荐文章于 2022-06-22 19:43:31 发布

阅读量412

点赞数

文章标签： css flex 定位

本文链接：https://blog.csdn.net/wen_j/article/details/105147478

版权

1.利用flexbox布局

.parent{
    width: 100%;
    height: 37.5rem/* 600px */;
    background: #09c;
    display: flex;
    justify-content:center;    /* 水平居中 */
    align-items:center;        /* 垂直居中 */
    /* flex-direction:column; */    /* 一列显示 */
}

.children{
    width: 100px;
    height: 100px;
    background-color: #eee;
    border: 1px dashed #000;
    margin: 5px;
    /*如果children下面还有子元素的话，可以嵌套使用*/
    /* display: flex;
    justify-content: center;
    align-items:center;  */
}

2.利用绝对定位和transform

.parent{ 
    position: relative; 
    background-color: #eee;
    width: 100%;
    height: 100%;
} 
.parent .children{ 
    background-color: #751; 
    width: 200px; 
    height: 200px;
    position: absolute;  
    top: 50%; 
    left: 50%; 
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

3.将父元素定位，子元素绝对定位，利用margin负值为子元素宽高的一半来实现

.parent{
    position: relative;
    background-color: #eee;
    height: 600px;
    width: 100%;
}
.parent .children{
    background-color: #751;
    width: 200px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -100px;
}

4.利用定位与margin：auto

.parent{
    width: 100%;
    height: 37.5rem/* 600px */;
    background: #09c;
    position: relative;
}
.children{
    width: 100px;
    height: 100px;
    background-color: #eee;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}