How to Vertically Center Multiple Elements?

Question

I've looked all across this site (and the rest of the internet), and the only question which actually mentions vertically centering two or more is this one, but the only answer there seems to just be an entire code review. In the process of learning CSS, I still cannot reliably position things centrally in the order I want them. Horizontally centering is often just as difficult, although I've managed in the minimal code example below. I know of howtocenterincss.com but that only lets me align one thing vertically.

In the following code example, I want the two buttons collectively to be centered in the div, arranged one above the other, with a margin in between them. I've managed to get half way there, but can't quite figure out how to align them vertically within the div.

#buttonContainer {
  display: inline-block;
  border: solid 3px black;
  width: 400px;
  height: 400px;
}

.button {
  display: block;
  margin: auto;
}

<div id="buttonContainer">
  <button id="b1" class="button">Button 1</button>
  <button id="b2" class="button">Button 2</button>
</div>

Vadim Ovchinnikov · Accepted Answer · 2017-07-24T08:14:11.157

It's not a good idea to apply absolute positioning where you don't want overlapping. You can use flexbox to achieve desired layout. Demo:

#buttonContainer {
  /* make element inline flex-container */
  /* this will make its children flex-items */
  display: inline-flex;
  /* align-items items in column */
  flex-direction: column;
  /* center items horizontally */
  align-items: center;
  /* center items vertically */
  justify-content: center;
  
  border: solid 3px black;
  width: 400px;
  height: 400px;
}

<div id="buttonContainer">
  <button id="b1" class="button">Button 1</button>
  <button id="b2" class="button">Button 2</button>
</div>

score 2 · Answer 2 · answered Jul 24 '17 at 06:50

I usually prefer to use flexbox:

#buttonContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: solid 3px black;
  width: 400px;
  height: 400px;
}

.button {
  display: block;
}

<div id="buttonContainer">
  <button id="b1" class="button">Button 1</button>
  <button id="b2" class="button">Button 2</button>
</div>

Ehsan · Answer 3 · 2017-07-24T08:55:56.670

inline-flex support in IE10+

flex-direction support in IE11 only

align-items support in IE11 only

So, i Prefer dont use this properties,i use this way :

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    display: inline-block;
}

#buttonContainer {
    display: inline-block;
    position: relative;
    border: solid 3px black;
    width: 400px;
    height: 400px;
}

.button {
    display: block;
    margin:2px;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    display: inline-block;
}

<div id="buttonContainer">
    <div class="center">
        <button id="b1" class="button">Button 1</button>
        <button id="b2" class="button">Button 2</button>
    </div>
</div>

How to Vertically Center Multiple Elements?

3 Answers3