Dino Dino - 1 year ago 104
CSS Question

Vertically centering button using css

I have looked at many articles and have tried many various ways but I simply cannot get a button to vertically align to the center. I have setup the following jsfiddle for you to view:


I have done a table version showing you the layout that I am trying to achieve. (Note border on table is just to show you that the button is vertically centered and is not actually needed). Also where the text XXXXX or YYYYYY is this text maybe considerably longer or shorter so the button should center accordingly.

Thanks in advance.

Ps. I was testing in Chrome

Answer Source


.container {
  background: lightblue;
  display: table;
input[type=button] {    
  vertical-align: middle;
  display: block;
  width: 50%;
  margin: 0 auto;
.button-wrapper {
  background: darkorange;
  display: table-cell;
  vertical-align: middle;
<div class='container'>
  <div>some line with text</div>
  <div>another line with text</div>    
  <div class='button-wrapper'>
    <input type="button" value="submit"  />