未知宽高的div怎么垂直水平居中
Posted jonie-wong
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了未知宽高的div怎么垂直水平居中相关的知识,希望对你有一定的参考价值。
恨到弹窗都需要实现垂直水平居中的功能,知道宽高可以用绝对定位,加上设置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 } 7
以上是关于未知宽高的div怎么垂直水平居中的主要内容,如果未能解决你的问题,请参考以下文章