小 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>
上一篇:关于导出Excel


下一篇:学习Python编程的11个精品资源