css - 水平对齐 img 和文本？

Question

在 Web 开发方面迈出第一步。我有一个应用程序，其加载器屏幕与 this Fiddle 非常相似.

在桌面浏览器上，文本/图像垂直和水平居中(无论如何对眼睛而言)看起来是可以接受的。

但是，当您在较小的屏幕尺寸上查看我的应用程序时，文本/图像开始不与屏幕中心水平对齐。

我已经阅读了许多相关的文章和博客，但无论设备宽度如何，都无法让我的文本/图像保持居中。这可以通过调整 fiddle 的大小来复制预览以使其更薄。

<div id="preloader">
<div class="preloaderContent">
    <div id="loadLabel">Please Wait</div>
    <img src="http://www.igfa.org/images/throbber.gif"><br>
    </div>
</div>

#preloader {
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
    background:#3399FF;
    z-index:999;
}

.preloaderContent {
    position: absolute;
    left: 45%;
    top: 40%;
}

.preloaderContent img {
    display : block;
    margin : auto;
    text-align: center;
}

#loadLabel {
    padding-bottom: 10px;
    font-size: 30px;
    font-weight: 300;
    font-family: 'Segoe UI',Helvetica,Arial,'Sans-Serif';
    color: #FFFFFF; 
    text-align: center;
}

抱歉有点乱。谁能指出我方法中的错误？

Answer 1

你想输入这样的东西:

.preloaderContent {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200px;
    height: 100px;
    margin-top: -50px;/*half of height*/
    margin-left: -100px;/*half of width*/
}

负边距意味着 div 的中心位于中心而不是左上角。这将根据浏览器窗口大小调整大小。示例:http://jsfiddle.net/z3zpz/2/