未知高度和宽度元素的水平垂直居中
1、当要被居中的元素是inline或者inline-block元素
#container{
display:table-cell;
text-align:center;
vertical-align:middle;
}
#center{
}
2、利用Css3的transform,可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。
#container{
position:relative;
}
#center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
3、flex
#container{
display:flex;
justify-content:center;
align-items: center;
}
#center{
}