Center a button horizontally and vertically in a div

Question

I would like to center a button horizontally and verticaly in a middle of a div for my project.

Here is the html code:

<div class="PageHeader_wrapper" id="header-buttons">
  <form id="CreateAccount" action="CreateAccount.php" method="post">
    <input type="submit" value="Create an account">
  </form>
</div>

and the CSS here :

#header-buttons {
  margin-right: 35px;
  float: right;
  height: 68px;
  width: auto;
  border: 1px solid red;
}

Js fiddle here: https://jsfiddle.net/m635r2rf/10/

https://jsfiddle.net/m635r2rf/11/ You can do that like that, but you need to set a width for a parent — El Danielo, Jan 26 '17 at 23:12
Possible duplicate of [CSS vertical align](http://stackoverflow.com/questions/4785871/css-vertical-align) — Charles-Édouard Coste, Jan 26 '17 at 23:17
You need to search SO for the already too many solutions to this same question. — Rob, Jan 27 '17 at 10:57

score 6 · Answer 1 · answered Jan 26 '17 at 23:13

Use a combination of display: flex; align-items: center; justify-content: center;. Also, this is a useful reference https://www.w3.org/Style/Examples/007/center.en.html

#header-buttons {
  margin-right: 35px;
  float: right;
  height: 68px;
  width: auto;
  border: 1px solid red;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="PageHeader_wrapper" id="header-buttons">
  <form id="CreateAccount" action="CreateAccount.php" method="post">
    <input type="submit" value="Create an account">
  </form>
</div>

Very nice ! it does the job ! Thanks for the quick answer. ^_^ — , Jan 26 '17 at 23:17

score 4 · Answer 2 · answered Jan 26 '17 at 23:18

4

A simple solution is to use flexbox: Add these settings to your wrapper:

  display: flex;
  align-items: center;
  justify-content: center;

https://jsfiddle.net/3t7ynn6p/

answered Jan 26 '17 at 23:18

Johannes

64,305
18
73
130

score 0 · Answer 3 · answered Jan 26 '17 at 23:12

What you're looking for is to set a line-height on the form element:

#CreateAccount {
  line-height: 60px;
}

This is 60px in this situation because your parent element is 68px, and the default font-size is 16px. Half of the font-size of the button should equal the difference from the parent's line-height.

Essentially, it would be:

#CreateAccount {
  line-height: calc(100% - (1em /2)); /* calc([parent height] - ([font-size] / 2)); */
}

I've created a fiddle showcasing this here.

Hope this helps! :)

Przemysław Melnarowicz · Answer 4 · 2017-01-27T13:32:21.577

You can use table for that (probably easiest and most backward-compatible method).

#header-buttons {
    margin-right: 35px;
    float: right;
    height: 68px;
    width: auto;
    border: 1px solid red;
    display: table;
}

#CreateAccount {
    display: table-cell;
    vertical-align: middle;
}

for horizontal alignment just use text-align property (as button is inline-block) as in example here: https://jsfiddle.net/m635r2rf/64/

score 0 · Answer 5 · answered Jul 25 '18 at 03:25

HTML code change: added one id for button to select.

 <div class="PageHeader_wrapper" id="header-buttons">
              <form id="CreateAccount" action="CreateAccount.php" method="post">
                <input type="submit" id="createBtn" value="Create an account">
      </form>

CSS code change: removed styling from div and added in the button as below -

 #createBtn {
   position: fixed;
   left: 50%;
   top:50%;
 }

Center a button horizontally and vertically in a div

5 Answers5