未知宽高的div怎么垂直水平居中(transform: translate(-50%, -50%);)

知道宽高可以用绝对定位，加上设置margin为负值，大小为宽高的一半即可

1 #demo{
2     position: absolute;
3     width: 200px;
4     height: 200px;
5     top: 50%;
6     left: 50%;
7     margin-left: -100px;
8     margin-top: -100px;
9 }

如果不知道宽高怎么来垂直居中呢？其实很简单，只要加上transform: translate(-50%, -50%);就可以了

 

1 #demo{
2     position: absolute;
3     top: 50%;
4     left: 50%;
5     transform: translate(-50%, -50%);
6 }

 

 

参考链接:https://www.cnblogs.com/jonie-wong/p/11671147.html