未知宽高的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怎么垂直水平居中的主要内容,如果未能解决你的问题,请参考以下文章

一个未知宽高的元素在div中垂直水平居中

未知宽高的图片水平垂直居中的几种方法

怎么让一个不定宽高的div水平居中,垂直水平居中

未知宽高的元素水平垂直居中方法总结

未知盒子宽高使盒子垂直水平居中

设置不定宽高的div垂直水平居中