盒子垂直居中方式

最通用的盒子垂直居中方式

1. absolute + translate

html :

“n the event of a large-scale natural...

— Oscar Wilde, The Picture of Dorian Gray

css ：

.wrap{
width:100%;
height: 100%;
position: relative;
/overflow: hidden;/
background: url("../images/tiger.jpg") 0 / cover fixed;
}
main {
width: 600px;
height: 240px;
border-radius: 8px;
padding: 20px 10px;
text-align: justify;
position:absolute;
left:50%;
top:50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background: hsla(0, 0%, 100%, .3);
}

2.absolute +margin

.wrap{
width:100%;
height: 100%;
position: relative;
background: url("../images/tiger.jpg") 0 / cover fixed;
}
main {
width: 600px;
height: 240px;
border-radius: 8px;
padding: 20px 10px;
text-align: justify;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}