Trying to center a div but nothing can't get anything to work

Question

I am trying to center a simple div but I am failing miserably. Nothing I try works, including many examples here on Stack Overflow. Here is (the main part of) my CSS:

body {
      min-height: 640px;
      background: #282a36;
      color: #bcc3cd;
      font-size: 12px;
      margin: 0;
      font-family: 'Source Sans Pro', sans-serif;
    }
    #nickbox {
      border: 1px solid white;
      display: inline;
      padding: 5px;
      background-color: #ffffff00;
    }

<div id="welcome">
      <p tabindex="0" class="title">
        Cards Against Oakbank
      </p>
      <p class="subtitle">A Cards Against Humanity clone.</p>
      <div id="nickbox">
        <label for="nickname">Nickname:</label>
        <input type="text" id="nickname" value="" maxlength="20" role="textbox"
            aria-label="Enter your nickname." data-lpignore="true" />
        <input type="button" id="nicknameconfirm" value="Set" />
        <span id="nickbox_error" class="error"></span>
      </div>
    </div>

There's no attempt at centering in there right now as I've run out of ideas. What should I use? I just want the #nickbox to be centered horizontally on every screen. I don't really care about supporting older browsers, it's varying resolutions that I care about. Thanks.

score 1 · Accepted Answer · answered Oct 26 '18 at 09:04

For layout, it's better to use FlexBox. It's more, well....flexible :) . It's very easy to use and understand.

For example, use display:flex on parent #welcome . Together with flex-direction:column so the child elements don't stay on one line but one below the other. Then on your desired element use align-self:center to center it inside the parent container.

Read more about FlexBox

body {
  min-height: 640px;
  background: #282a36;
  color: #bcc3cd;
  font-size: 12px;
  margin: 0;
  font-family: 'Source Sans Pro', sans-serif;
}
#nickbox {
  border: 1px solid white;
  display: inline;
  padding: 5px;
  background-color: #ffffff00;
  align-self:center;
}
#welcome {
  display:flex;
  flex-direction:column;
}

<div id="welcome">
  <p tabindex="0" class="title">
    Cards Against Oakbank
  </p>
  <p class="subtitle">A Cards Against Humanity clone.</p>
  <div id="nickbox">
    <label for="nickname">Nickname:</label>
    <input type="text" id="nickname" value="" maxlength="20" role="textbox"
        aria-label="Enter your nickname." data-lpignore="true" />
    <input type="button" id="nicknameconfirm" value="Set" />
    <span id="nickbox_error" class="error"></span>
  </div>
</div>

OBS With flexbox to align items horizontally you use justify-content on parent or justify-selfon the desired child. To align them vertically you use align instead of justify. In the above example i used align to align horizontaly because of the flex-direction:column which changes the default direction of the elements. That's why the align and justfy styles are reversed

AkshayM · Answer 2 · 2018-10-26T08:57:24.860

0

When i comes to positioning something, always use flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Live working example: https://jsfiddle.net/ty6zcsw9/

html: surround div with id nickbox with div with nickbox-container

<div class='nickbox-container'>
  <div id="nickbox">
    <label for="nickname">Nickname:</label>
    <input type="text" id="nickname" value="" maxlength="20" role="textbox" aria-label="Enter your nickname."
      data-lpignore="true" />
    <input type="button" id="nicknameconfirm" value="Set" />
    <span id="nickbox_error" class="error"></span>
  </div>
</div>

css: add following to your css

.nickbox-container{
    display: flex;
    justify-content: center;
}

edited Oct 26 '18 at 08:57

answered Oct 26 '18 at 08:55

AkshayM

1,421
10
21

I Agree with this solution but it kind of breaks the design made by OP. Although i also prefer using flexbox to center DIV's – Linksonder Oct 26 '18 at 08:57
Why add the unnecessary div? There are solution even with flexbox, that don't require to alter the HTML. Adding HTML elements to match a design should always be handled as a last resort kind of solution – Th3S4mur41 Oct 26 '18 at 09:55
@MichaëlVanderheyden can you give an example using flexbox without adding extra div – AkshayM Oct 26 '18 at 09:56
@AkshayMilmile sure, just look at the one I upvoted as response in this topic: https://stackoverflow.com/a/53005186/7041074 – Th3S4mur41 Oct 26 '18 at 10:08
@MichaëlVanderheyden in this answer, we added flexbox in `#welcome`, this will affect other elements inside `#welcome`. If there were many more elements inside `#welcome`, we won't want unnecessay shifting here and there. So, I think minor addition of div, if it ensures that no other element is touched, is aggreable – AkshayM Oct 26 '18 at 10:42
1

Well your argumentation is valid, but from the example in the question, all elements being block elements and the default for align-items being stretch, the flexbox on #welcome will have no effect. It could only have a potential unwanted effect if there were some inline elements added to the #welcome parent. So adding a simple div is indeed not that dramatic in such a small example, but unnecessary. Applying the same logic to bigger project would lead to a whole bunch of unnecessary elements that make the DOM tree much more complex than it has to be. – Th3S4mur41 Oct 26 '18 at 11:09

score 0 · Answer 3 · answered Oct 26 '18 at 08:56

The problem is related to the following line of code:

#nickbox {
  ...
  display: inline; \
  ...
}

An 'inline' element behaves like Text. Most solutions on Stack Overflow about 'centering' a DIV use the 'Block' display. So those solutions are not going to work for you.

But there is hope yet! Because text elements are easily centered with a 'text-align: center' line. Add this line to body and it should fix your problem.

This should fix your problem. See the following JS Fiddle:

http://jsfiddle.net/jcolicchio/kNB3c/

body {
  min-height: 640px;
  background: #282a36;
  color: #bcc3cd;
  font-size: 12px;
  margin: 0;
  font-family: 'Source Sans Pro', sans-serif;
  text-align:center;
}

score 0 · Answer 4 · answered Oct 26 '18 at 09:04

Yu can try this

body {
  min-height: 640px;
  background: #282a36;
  color: #bcc3cd;
  font-size: 12px;
  margin: 0;
  font-family: 'Source Sans Pro', sans-serif;
}

#nickbox {
  border: 1px solid white;
  display: inline;
  padding: 5px;
  background-color: #ffffff00;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div id="welcome">
  <p tabindex="0" class="title">
    Cards Against Oakbank
  </p>
  <p class="subtitle">A Cards Against Humanity clone.</p>
  <div id="nickbox">
    <label for="nickname">Nickname:</label>
    <input type="text" id="nickname" value="" maxlength="20" role="textbox"
        aria-label="Enter your nickname." data-lpignore="true" />
    <input type="button" id="nicknameconfirm" value="Set" />
    <span id="nickbox_error" class="error"></span>
  </div>
</div>

While this solution could, work using absolute positioning is a bit of an overkill to just center an element. Moreover without a position: relative on #welcome the element would be positioned absolutely on the page, not the container, which might not be the wanted effect. Finally, the #nickbox is centered on the page, but the question was only to center it horizontaly — Th3S4mur41, Oct 26 '18 at 09:53

score 0 · Answer 5 · answered Oct 26 '18 at 09:14

hi can you check this https://jsfiddle.net/fnq9v4s5/1/ , you can adjust vertically giving proper vertical height to .nickcontainer

<div id="welcome">
  <p tabindex="0" class="title">
    Cards Against Oakbank
  </p>
  <p class="subtitle">A Cards Against Humanity clone.</p>
  <div class="nickcontainer">

  <div id="nickbox">
  <p class="filed">
    <label for="nickname">Nickname:</label>
    <input type="text" id="nickname" value="" maxlength="20" role="textbox"
        aria-label="Enter your nickname." data-lpignore="true" />
    <input type="button" id="nicknameconfirm" value="Set" />
    <span id="nickbox_error" class="error"></span>
    </p>
  </div>
   </div>
</div>

css

   body {
      background: #282a36;
      color: #bcc3cd;
      font-size: 12px;
      margin: 0;
      font-family: 'Source Sans Pro', sans-serif;
    }
    #nickbox {
      padding: 5px;
      background-color: #ffffff00;
      display: table-cell;
      vertical-align: middle;
    }
    .nickcontainer{    
     display: table;
     height: 82vh;}

     p.filed{
      border:solid 1px #fff;
      display:block;
       padding:5px;
       }

score 0 · Answer 6 · answered Oct 26 '18 at 09:30

There are many ways to fix your little problem.

The easiest way is to change display:inline of #nickbox to display:block and set text-align:center. All elements in the div will automatically flow to the center.
You could, alternatively set the width of #nickbox and set margin:0 auto.
Or, set #nickbox to display: flex justify-content: center.

Trying to center a div but nothing can't get anything to work

6 Answers6