Basic responsive page with centered content

Question

I have a webpage and I'm using Jquery mobile.

I have an image and un text and I would like to center the content in my page horizontaly and verticaly, and when I modify the width of the window, the content should adapt.

Here is an example :

In the example, the content adapt correctly, but it's not centered. if I set the style of my content div to :

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

To my div, the content is centered but no longer adapt...

Can you update my jsfiddle to do what I need ?

Charles Ingalls · Accepted Answer · 2014-06-12T13:53:29.980

1

You can work with display: table; on the outer and display:table-cell on the inner container to center stuff vertically. Check this out:

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

EDIT Max width 500px for content:

http://jsfiddle.net/NrCGb/585/

edited Jun 12 '14 at 13:53

answered Jun 12 '14 at 13:34

Charles Ingalls

4,521
5
25
33

Thanks, it works but I would like to have my content with a 500px width in the center – user3544117 Jun 12 '14 at 13:48
updated my answer. It would be good though if you would also try yourself a bit because this is actually very basic stuff. – Charles Ingalls Jun 12 '14 at 13:53
Thank you and sorry for the basic question, I'm really a beginner and was struggling for a long time... – user3544117 Jun 12 '14 at 14:07
Don't be sorry for asking a basic question. :) It would be just good if you try yourself and then ask again if you are stuck. Anyway, glad I was able to help you. :) – Charles Ingalls Jun 12 '14 at 14:13

score 0 · Answer 2 · answered Jun 12 '14 at 13:24

0

(example: 502 Bad Gateway) jQuery Mobile is not good for customization. Use it as it is or don't use it at all. After two projects with it, I find no benefit, just headache. Try with !important

answered Jun 12 '14 at 13:24

PeterK-Designer

1
2

score 0 · Answer 3 · edited May 23 '17 at 12:13

This should work

#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/

This article could prove useful to you as well http://www.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/

This stackoverflow thread might also help you. Center a DIV horizontally and vertically

Basic responsive page with centered content

3 Answers3