设置盒子水平垂直居中 总结
/*实现方法一：position transform*/
.outer{
position: relative;
width: 600px;
height: 400px;
background-color: aqua;
}
.inner {
position: absolute;
width:500px;
height:300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink;
}
/*实现方法二：使用display:flex align-items:center justify-content:center*/
.outer{
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 200px;
background-color: aqua;
}
.inner{
width: 200px;
height: 100px;
background-color: blue;
}
/* 实现方法三：使用position % margin */
.outer{
position: relative;
width: 600px;
height: 400px;
background-color: aqua;
}
.inner{
position: absolute;
width:300px;
height:200px;
top: 50%;
left: 50%;
margin: -150px 0 0 -250px; /* 外边距为负的自身宽高的一半 */
background-color: violet;
}
/* 实现方法四：使用position 0 margin:auto */
.outer{
position: relative;
width: 600px;
height: 400px;
background-color: aqua;
}
.inner{
position: absolute;
width:300px;
height:200px;
top: 0;
left: 0;
right:0;
bottom:0;
margin: auto;
background-color: violet;
}
/*实现方式五：display:table display: table-cell; text-align: center; vertical-align: middle;*/
.outer{
display:table;
background-color: pink;
width: 300px;
height: 200px;
}
.inner{
display: table-cell;
text-align: center;
vertical-align: middle;
}
