CSS实现div盒子垂直水平居中
未修改前样式：
方法一：定位（父元素相对定位，子元素绝对定位）
<style>
.bigBox{
position: relative;
widows: 600px;;
height:400px;
border: 2px solid black;
}
.smallBox{
position: absolute;
top:0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
width: 200px;
height: 200px;
background-color:pink;
}
</style>
</head>
<body>
<!-- div盒子实现垂直水平居中 -->
<div class="bigBox">
<div class="smallBox"></div>
</div>
</body>
效果图一：
方法二：外边距
口诀：父相子绝，上左各一半，外边距减自身宽高一半；
<style>
.bigBox{
position: relative;
widows: 600px;;
height:400px;
border: 2px solid black;
}
.smallBox{
position: absolute;
top:50%;
left: 50%;
margin:-100px 0 0 -100px;
width: 200px;
height: 200px;
background-color:pink;
}
</style>
</head>
<body>
<!-- div盒子实现垂直水平居中 -->
<div class="bigBox">
<div class="smallBox"></div>
</div>
</body>
效果图：
方法三：transform属性
<style>
.bigBox{
position: relative;
widows: 600px;;
height:400px;
border: 2px solid black;
}
.smallBox{
position: absolute;
top:50%;
left: 50%;
/* transform常用于 2D 或 3D 转换，该属性允许我们对元素进行旋转、缩放、移动或倾斜。 */
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
background-color:pink;
}
</style>
</head>
<body>
<!-- div盒子实现垂直水平居中 -->
<div class="bigBox">
<div class="smallBox"></div>
</div>
</body>
效果图：
方法四：flex布局
<style>
.bigBox{
display: flex;
/* 垂直居中 */
align-items: center;
/* 水平居中 */
justify-content: center;
widows: 600px;;
height:400px;
border: 2px solid black;
}
.smallBox{
width: 200px;
height: 200px;
background-color:pink;
}
</style>
</head>
<body>
<!-- div盒子实现垂直水平居中 -->
<div class="bigBox">
<div class="smallBox"></div>
</div>
</body>
效果图：