Question

我想做一些非常简单的事情。当我单击一个div时，我想显示一些以任何分辨率为中心的文本。

这是我的方法：

<button>Click</button>
<div id="fade"><a class="close" href="#">&#215;</a>
     <p>Lorem ipsum sit dolor amet</p>

 </div>

和这个css：

#fade {background:red; width:100%; height:150px;}
.close {
color:white;
font:bold 40px Arial,Sans-Serif;
text-decoration:none;    
   }

这是jsfiddle

现在我想做的是将#fade div置于每个屏幕分辨率的中心。

我怎样才能做到这一点？

Answer 1

总是垂直和水平居中的

`div`

首先，您需要为div设置实际宽度。 100％不会这样做接下来，将其position设置为absolute;

#fade {background:red; width:450px; height:150px; position:absolute;}

然后是更新的jQuery：

jQuery.fn.center = function() {
    _TOP = (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop();
    _TOP = (_TOP <= 0) ? 0 : _TOP;
    _LEFT= (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft();
    _LEFT = (_LEFT <= 0) ? 0 : _LEFT;
    this.css({
        top:_TOP + "px",
        left:_LEFT + "px"
    });
    return this;
}


$("#fade").center();
$(window).on('resize', function() {
    $("#fade").center();
});

$("#fade").hide();
$("button").click(function() {

    $("#fade").fadeToggle("slow", "linear").find(".close").on("click", function() {
        $(this).parents("#fade").fadeOut("slow");
        return false;
    });

    $("#fade").center();
});

DEMO

Answer 2

设置包含文本的p标签的text-align属性。

<p style="text-align:center">Lorem ipsum sit dolor amet</p>

<强> Live demo

Answer 3

对于垂直对齐设置：

#fade {
    background:red; 
    width:100%; 
    height:150px;
    position: absolute;
    top: 50%;
    margin-top: -75px;
}

<强> Live demo

Answer 4

这是我的解决方案，它添加填充以使div的内容居中，并在通过jQuery onclick时将#fade div放置在屏幕中间：

CSS：

#fade { background:red; width:90%; padding:50px 0; text-align:center; position:absolute; }
#fade p { display:inline-block; position:relative; top:-10px;  }

使用Javascript：

$("#fade").hide();
$("button").click(function() {
    var wh = $(window).height();
    var ww = $(window).width();
    var fh = $('#fade').outerHeight();
    var fw = $('#fade').outerWidth();
    $('#fade').css('top', Math.floor((wh-fh)/2)+'px');
    $('#fade').css('left', Math.floor((ww-fw)/2)+'px');
    $("#fade").fadeToggle("slow", "linear").find(".close").on("click", function() {
        $(this).parents("#fade").fadeOut("slow");
        return false;
    });
});

如果你不想使用jQuery，那么请改用css，例如#fade { margin:50px auto; }但是它不会垂直居中。

And the fiddle is here.

单击居中时淡入和淡出文本

4 个答案:

`div`