<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box{
width: 500px;
height: 500px;
border: 2px solid red;
/* 第二种方法 */
/* display: flex;
justify-content: center;
align-items: center;*/
/* 将主轴方向扭转 */
/* flex-direction: column; */
/* 多余部分是否换行 */
/* flex-wrap: nowrap; */
/* flex-direction 与 flex-warp 简写形式 */
/* flex-flow: column nowrap; */
/* 第三种方法 */
/* position: relative; */
/* 第四种 */
/* text-align: center; */
/* 第五种方法 */
/* position: relative; */
/* 第六种 方法 使用表格 */
/* display: table-cell;
vertical-align: middle; */
/*第七种 方法 使用网格布局*/
display:grid ;
grid-template-rows:repeat(3, 33.33%);
grid-template-columns:repeat(3,33.33%);
}
.div{
width: 200px;
height: 200px;
background-color: aqua;
/*第一种 元素居中 */
/* margin: 150px auto; */
/* 第三种 使用定位 */
/* position: absolute;
top:150px;
left: 150px; */
/* 第四种 将子元素 转为行内块元素 在 用text-align:center;*/
/* display: inline-block; */
/* 第五种 子元素 加定位 0px 再加 margin :auto; */
/* position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
margin: auto; */
/* 第六种方法 */
/* margin: 0 auto; */
/* 第七种 方法 grid */
grid-rows-start:2;
grid-rows-end:3;
grid-column-start:2;
grid-column-end:3;
}
</style>
<div class="box">
<div class="div"></div>
</div>
</body>
</html>
