垂直居中的四种实现方式
- 使用margin 利用百分比进行垂直居中
- 使用margin:auto 进行居中显示
- 使用css3的transform属性进行垂直居中
- 使用flex 布局进行垂直居中
//先设置必要的样式 html 结构
<div class="box">
<div class="box1">
我是要被垂直居中的盒子
</div>
</div>
/* 基本样式 */
*{
margin: 0;
padding: 0;
box-sizing: border-box;//盒子的内减模式
}
//方法如下
.box{
/*必要的宽高*/
width: 400px;
height: 400px;
background-color:aqua;
margin: 100px auto;
position: relative;
/* 方法四 ==>flex布局方式 记住不能把排列方式写到子项去 */
display: flex;
justify-content: center;
align-items: center;
}
.box1{
/* 第一种方式 margin 百分比是相对于父元素的*/
/* position: absolute;
top: 50%;
left:50%;
margin-left: -100px;
margin-top: -100px; */
/* 第二种方式 margin */
/* margin: auto;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0; */
/* 第三种方式==>css3 的方式 利用了translate 中的百分比相对于它自己*/
/* position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%); */
/*必要的宽高*/
width: 200px;
height: 200px;
background-color: blueviolet;
}