How to place any element <div> in centre of a web page using CSS?

HTML & CSS
1

Please, tell how to place any element

in centre of a web page? I know, how to place a text in centre of a page, but to place a div element, it’s a problem. Just if to place a div element using pixels (right; left), it’s not very convenient, because each screen of everyone’s computer is different. So how to place a div element that it would be placed equally on any screen?

In advance, I am grateful for an information and advice.

2

Are you going for an overlay? Depends on what exactly you are trying to do; answers can vary. Does the div have a fixed width?

3

As Ryan said your question is a little vague and it seems to me you may be asking the wrong question but here’s how to place a div of unknown widths and height in the middle of the screen.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
    height:100%;
    margin:0;
    padding:0
}
.wrap {
    display:table;
    width:100%;
    height:100%;
    border-collapse:collapse;
}
.inner {
    display:table-cell;
    vertical-align:middle;
    text-align:center;
}
.content {
    display:inline-block;
    vertical-align:middle;
    padding:10px;
    border:2px solid red;
    box-shadow:0 0 10px rgba(0,0,0,0.5);
}
</style>
</head>

<body>
<div class="wrap">
        <div class="inner">
                <div class="content"> This is some content <br>
                        in the middle of the screen. </div>
        </div>
</div>
</body>
</html>

I feel you may be asking the wrong question because vertical alignment like that is not really useful for normal sites as they usually go below the fold.

Perhaps you can provide a demo of your problem if the above does not address your initial concerns.

4

Thank you for answers!
Just you see, I need to position some blocks (div blocks) such way that any browser or any screen of any size of any customer’s computer would display all the blocks correctly as it should be by my idea. But I came across with such a problem: all browsers which my computer has, they display all correctly but other people have a problem with this and the position of the blocks looks enough strange and not so correctly as it should be to. I hope, this explains my issue better in the time. Sorry for the first incorrect explanation of the issue.

In advance, I am grateful.

5

Thank you for answer!

6

Again, you didn’t really say what this will be use for so I’m just throwing this out there.

http://codepen.io/ryanreese09/pen/RNxoxx

7

I think you are on the wrong track here or I am still misunderstanding.:slight_smile:

I think you are talking about a whole site rather than a couple of divs. Is this correct?

If so you can’t just make a site a fixed width and height and then expect it to fit everywhere. You need to create a responsive website (RWD) where the site adapts to the users environment which usually means using media queries and the viewport meta tag to create the optimal experience.

You would need to create fluid or adaptive layout techniques and craft your pages so that that they fit in all resolutions. There is no quick fix as such.

Apologies if this is not what you meant and if so perhaps (as mentioned before) you could provide a demo of what your exact problem is?

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.