具有居中内容的基本响应式页面

Question

我有一个网页，我正在使用Jquery mobile。

我有一个图像和非文本，我想将内容放在我的页面中心和垂直中心，当我修改窗口的宽度时，内容应该适应。

以下是an example：

在示例中，内容正确调整，但不是居中。如果我将我的内容div的样式设置为：

style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto;width: 500px;"

对于我的div，内容居中但不再适应......

你可以更新我的jsfiddle来做我需要的吗？

Answer 1

您可以使用内部容器上的display: table;和内部容器上的display:table-cell来垂直居中。看看这个：

http://jsfiddle.net/NrCGb/578/

编辑内容的最大宽度为500px：

<强> http://jsfiddle.net/NrCGb/585/

Answer 2

（例如：502 Bad Gateway） jQuery Mobile不适合自定义。按原样使用或根本不使用它。经过两个项目之后，我发现没有任何好处，只是头疼。 试试！important

Answer 3

这应该有效

#content {
    margin: auto;
    position: absolute;
    top: 50%;
    margin-top: -250px;
    left: 0;
    right: 0;
    text-align: center;
    height: 500px;
}

http://jsfiddle.net/wesleysmits/NrCGb/581/

本文也可能对您有用 http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

此stackoverflow线程也可能对您有所帮助。 Center a DIV horizontally and vertically