<div class="div1">
<div class="div2" style="background-color:red;width:100px;height:100px;">我在中间</div>
</div>
HTML
格式化
支持Emmet，输入 p 后按 Tab键试试吧！
<head> ... </head>
<body>
</body>
CSS
格式化
body,
html {
width: 100%;
height: 100%;
}
.div1 {
background-color: grey;
height:100%;
width:100%;
/*第一种 grid 布局方式*/
display:grid;
place-items:center;
/*第二种 flex 布局方式*/
/*display:flex;
align-items:center;
justify-content:center;*/
}
.div2{
color:#fff;
text-align:center;
line-height:100px;
/*第三种 绝对定位*/
/* position:fixed;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;*/
/*第四种 transform*/
/*position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);*/
/*第五种 margin负值*/
/*position: absolute;
left:50%;
top:50%;
margin-left:-50px;
margin-top:-50px;*/
}
JS
格式化
// 示例代码
console.log("Hello 笔.COOL 控制台")