小 div在大 div中左右上下居中
Posted jinsuo
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小 div在大 div中左右上下居中相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3瀑布布局</title>
<style type="text/css">
/*****************方法1 上下左右居中******************/
.container{
width:600px;
height:400px;
border:1px solid blue;
justify-content:center; /*元素的各项周围留有空白：*/
align-items:center; /***元素垂直居中*****/
display: flex;
}
.box {
width: 200px;
height: 100px;
border: 1px red solid;
}
/********************方法2 结束*****************/
/*********方法2 上下左右居中**********开始**
*{
margin: 0;
padding: 0;
}
.container{
width: 600px;
height: 400px;
border:1px solid blue;
position: relative;
}
.box{
width:200px;
height:100px;
border:1px red solid;
float: left;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -50px;
}*/
/**********************结束****************/
</style>
</head>
<body>
<div class="container">
<div class="box">
</div>
</div>
</body>
</html>
以上是关于小 div在大 div中左右上下居中的主要内容，如果未能解决你的问题，请参考以下文章