将div固定在页面中心，宽度和高度不同

Question

我有一个div，只有当用户点击类别列表中的链接时才会出现，即

类别1 第2类 第3类

并使用jquery $ .ajax（）加载内容，因此div的宽度根据返回的数据而变化，我不希望将div置于页面中心...

Answer 1

如果您想将元素准确放在浏览器的中心，请将这些样式分配给元素：

.box {
width: 200px;
height: 100px;
top: 50%;
left: 50%;
position: absolute;
margin: -50px 0 0 -100px;
}

这里我认为我的元素有100像素的高度和200像素的宽度，所以在边缘我把它的实际大小的1/2。这样，无论我的浏览器大小如何，我的元素都完全位于我的页面中心。

这是在线demo