让一个不定宽高的div水平垂直居中。
方法一:
.big {
background: red;
width: 200px;
height: 200px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.small {
display: inline-block;
vertical-align: middle;
background-color: green;
width: 100px;
height: 100px;
}
方法二:
.big {
background: red;
width: 200px;
height: 200px;
display: table-cell;
vertical-align: middle;
}
.small {
background-color: green;
width: 100px;
height: 100px;
margin: 0 auto;
}
方法三:
.big {
background: red;
width: 200px;
height: 200px;
position: relative;
}
.small {
background-color: green;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}