块级子元素在父元素中实现水平垂直居中

最新推荐文章于 2024-07-14 19:24:54 发布

qinchao888

最新推荐文章于 2024-07-14 19:24:54 发布

阅读量3.3k

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/GreyBearChao/article/details/78328562

版权

css 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

源代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8"> 
<style> 
.fu{background-color:pink;width:400px;height:400px;}
.zi{background-color:skyblue;width:100px;height:100px;}
</style>
</head>
<body>
<div class="fu">
    <div class="zi"></div>
<div>
</body>
</html>

方法一：

.fu{
    position: relative;
}
.zi{
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 50%;
    margin-left: -50px;
}

方法二：

.fu{
    position: relative;
}
.zi{
    position: absolute;
    top: 0;
    left: 0;
    right: 0; 
    bottom: 0; 
    margin: auto;
}

方法三：

//添加以下样式(使用css3定义的新属性 IE10+)

.fu{display:flex;}

//将父元素设为弹性容器也可设为display:inline-flex;
//两者的区别是设为inline-flex该元素视为内联元素

.zi{margin:auto;}

方法四：

//使用css3定义的新属性 IE10+
.fu{
    display:flex;
    justify-content: center; //子元素水平方向居中
    align-items: center;//子元素垂直方向居中
}

方法五：

//IE10+
.fu{
    position: relative;
}
.zi{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    //使该元素分别向左和上移动宽高一半的距离
}