css - 将宽度未知的 HTML 元素居中到屏幕中间

Question

如果我有一个宽度和高度未知的 HTML 元素，我怎样才能将它居中到屏幕的正中间？

如果不能用纯 CSS 完成，那么 javascript 就可以了。

Answer 1

你可以通过jquery..

$(function () {
    var element=$("#elementid")
    element.css("position","absolute");
    element.css("top", Math.max(0, (($(window).height() - this.outerHeight()) / 2) + 
                                                $(window).scrollTop()) + "px");
    element.css("left", Math.max(0, (($(window).width() - this.outerWidth()) / 2) + 

});

Answer 2

这个答案可能适合您的情况，也可能不适合您的情况，具体取决于如何确定未知的宽度/高度。如果确切的尺寸未知，但它们是用百分比设置的，那么您可以使用这种技术：

#content {
    background-color: khaki; /* demo purposes */  
    position: absolute;   
    height: 20%;
    top: 50%;
    margin-top: -10%; /* half the height */   
    width: 30%;
    left: 50%;
    margin-left: -15%; /* half the width */
}

有关示例，请参见此小提琴。总结一下：

• 缺点：仅在确切尺寸未知的情况下适用，因为它们以百分比指定。
• 亲：纯 CSS 解决方案。