Can't responsively center div that contains divs inside

Question

I'm trying to center my div #center and to make it responsive to different screen sizes. I have no luck in doing that. Here's the body of my HTML page.

<body>
    <h1 id="panneau">Panneau de score</h1>
    <div id="center">         
      <div class="temps" id="temps">0:00</div>
      <div class="score" id="score">0</div>
      <div class="scoreDeux" id="scoreDeux">0</div>
      <h2 id="Locaux">Locaux</h2>
      <h2 id="Visiteurs">Visiteurs</h2>
    </div>
    <center><img id="EquiLogo" src="EquinoxeLogo.png" alt="Equinoxe Logo"/></center>
  </body>

Here's #center's CSS:

#center { 
  width: 1100px;
  height: 1100px;       
  margin: 0 auto;
}

Here's the body's CSS:

body {   
 max-height: 300%;
 background: linear-gradient(315deg, #808080, #a6a6a6, #ff8080, #ff4d4d);
 background-size: 3000% 3000%;
 background-position: center;
 background-attachment: fixed;
}

Where have you got all these values from? 1100px? 300%? You could either, absolutely position it center see [here](https://stackoverflow.com/questions/8508275/how-to-center-a-position-absolute-element) or you could use flexbox on a container around it. — senojoeht, Feb 15 '18 at 19:31
Explain (by editing the question) how this thing is supposed to be centered, horizontally? vertically? both? what about your title and image above/below? — Huangism, Feb 15 '18 at 19:31
I first tried to solve my problem by looking up similar questions on stackOverflow — , Feb 15 '18 at 19:32

Obsidian Age · Answer 1 · 2018-02-15T19:36:10.663

I assume that by 'centering' #center, you're talking horizontally centering the text. In this case, you're looking for text-align: center. While your margin: 0 auto is indeed the right approach for block-level elements, you need text-align: center for both text and inline elements.

Note that #center has an enormous fixed width and height of 1100px, and this won't work responsively, as it will be larger than the viewport. You'll want a percentage-based width instead, like 50%.

If you further want to offset your image (like it was when #center had a large #height, you should instead use margin-top. If you want it stuck to the bottom of the page, you should use either position: fixed or the flexbox layout.

Both of these can be seen in the following example:

#center {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

body {
  max-height: 300%;
  background: linear-gradient(315deg, #808080, #a6a6a6, #ff8080, #ff4d4d);
  background-size: 3000% 3000%;
  background-position: center;
  background-attachment: fixed;
}

<body>
  <h1 id="panneau">Panneau de score</h1>
  <div id="center">
    <div class="temps" id="temps">0:00</div>
    <div class="score" id="score">0</div>
    <div class="scoreDeux" id="scoreDeux">0</div>
    <h2 id="Locaux">Locaux</h2>
    <h2 id="Visiteurs">Visiteurs</h2>
  </div>
  <center><img id="EquiLogo" src="http://placehold.it/100" alt="Equinoxe Logo" /></center>
</body>

I tried your method @Obsidian Age, and i tested it on a Chromebook. The #center is not really at the center of the page — , Feb 15 '18 at 19:42

score 0 · Answer 2 · answered Feb 15 '18 at 19:32

0

Add width: 100% to your body tag.

answered Feb 15 '18 at 19:32

Julien Ambos

2,010
16
29

How does that make any difference? – Huangism Feb 15 '18 at 19:33

score 0 · Accepted Answer · answered Feb 16 '18 at 00:19

The problem here is that you are giving a fixed px width to your center element, and that your body has no declared width. Add the next to your CSS

body {
  width:  100%; 
}

#center {
  max-width:  1100px; 
  width:  100%; 
  margin:  0 auto; 
  padding:  20px; 
  box-sizing:  border-box;
}

Explanation:

Here you will make your body full width.

Your #center element will adapt to the screen size (the width: 100%;) while capping at your maximum desired width (max-width: 1100px;).

The margin: 0 auto; property will center your #center element horizontally, while your padding: 20px; will provide a safe spacing between your element and the screen borders in screens smaller than 1100px (hence, will look like it is centered).

I would go a little further and even use display: flex; on your #center element to center its content like this:

body {
  width:  100%; 
}

#center {
  max-width:  1100px; 
  width:  100%; 
  margin:  0 auto; 
  padding:  20px; 
  box-sizing:  border-box;
  display:  flex; 
  flex-direction:  column; 
  align-items:  center; 
  justify-content:  center; 
}

Look at this JS fiddle. It looks pretty centered. https://jsfiddle.net/7637v5vh/2/ Is there a chance you have other styles or are not using the ones I provided? Do you need both a vertical and horizontal center or only an horizontal center? — Pablo E. Lujambio, Feb 16 '18 at 18:01

Can't responsively center div that contains divs inside

3 Answers3