Home/ Questions/Q 8700087
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T02:06:24+00:00

My problem is the following: I’ve vertically centered a div. However, I’d like to

  • 0

My problem is the following:

I’ve vertically centered a div. However, I’d like to center another div horizontally.
The problem is that I don’t manage to center it horizontally.

Here are my (X)HTML and CSS

(X)HTML:

<body>
<div id="strut"></div>
<div id="page">
    <div id="inner_page">
        <h1>Galidie "jQzz" Clément</h1>
    </div>
</div>

CSS:

html, body {
margin: 0;
padding: 0;
height: 100%;
}

#strut, #page {
    display: inline-block;
    vertical-align: middle;
}

#strut {
    height: 100%;
}

#page {
    border: 1px solid #c00;
}

#inner_page {
    width: 750px;
    margin: 0 auto;
    background-color: #c00;
}

h1 {
    text-align: center;
    margin: 0;
}

strut is the marker for vertically center an element. page is centered vertically. The idea is to try to center horizontally the inner_page block.

Should I use absolute position? Or anything else? Did I choose the good method?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    #page is inline-block, so it will always take up the dimensions of its children. In this case, its only child is #inner_page, which is 750px, so they both will be the same size. This means you cannot really center it inside #page.

    You can center #page itself by putting text-align: center on body for example.

    • 0