Make a form aligned vertically and horizontally

Question

I have a task to make a one page form, it only consist two input form and a save button.

I make it in a col-md-9 align center. but the form only horizontally centered, i want to make it vertically centered too.

<div class="col-md-9 no-float" align="center">
   <form>
         FIRST INPUT HERE
         SECOND INPUT HERE

         BUTTON
   </form>
</div>

and

.col-md-9
        {
            display: table-cell;
            width: 75%;
            height:100vh;
        }
.col-md-9.no-float {
            float: none; 
        }

Refer this http://stackoverflow.com/questions/8865458/how-to-align-text-vertically-center-in-div-with-css — Venkat.R, Jan 02 '16 at 06:35

score 0 · Answer 1 · answered Jan 02 '16 at 08:08

0

for horizontal center use margin: 0px auto 0px auto;

and for vertical center vertical-align: center;

if this dost work use padding on top and remove padding from bottom

answered Jan 02 '16 at 08:08

Akshay Vinchurkar

477
4
7

vertical-align: center ? – Dmitriy Jan 02 '16 at 08:14
vertical-align: middle; this will align this to the parent container – Akshay Vinchurkar Jan 02 '16 at 08:17
don't add the corrections as new comments, edit your answer instead – saljuama Jan 02 '16 at 16:36

score 0 · Answer 2 · answered Jan 02 '16 at 08:31

If the form won't change anymore, meaning the height won't change, you don't really need a dynamic solution. Just fiddle around with margin/padding-top in vh units. Make sure it doesn't have 100vh as a height when you do this.

For example:

.col-md-9 {
   height: auto;
   margin-top: 20vh; // or padding
}

// add mediaqueries for more specific stuff

It's not perfect but it works OK.

Otherwise you could do it dynamically with jQuery.

var browserHeight = $(window).height(),
    colHeight     = $('.col-md-9').outerHeight(),
    columnMargin  = (browserHeight / 2) - (colHeight / 2);

    // set margin-top for column        
    $('.col-md-9').css('margin-top', columnMargin);

zer00ne · Answer 3 · 2016-01-02T08:46:22.833

You can use calc if you know the width and height of your element. In your case, if your form was 200px wide and 30px high, you can set a margin-top: calc(50% - 15px) and margin-left: calc(50% - 100px). In this demo, I used vh and vw instead of percentages. If you want your form elements stacked on top of each other you can place a <br/> at the end of each element as I did in the demo, or you can assign display: block; to each form element.

Note: align attribute is obsolete in HTML5 which I assume your'e using if your'e using Bootstrap.

.col-md-9 {
  width: 100vw;
  height: 100vh;
}
form {
  height: 30px;
  margin-top: calc(50vh - 15px);
  width: 200px;
  margin-left: calc(50vw - 100px);
}

<section class="col-md-9">
  <form>
    <input/>
    <br/>
    <input/>
    <br/>
    <button>Button</button>
  </form>
</section>

score 0 · Answer 4 · answered Jan 02 '16 at 09:22

This works without having to know the size of the form. 500px is for demo purposes only. Change this to 100% for a normal site.

.container-main {
    display: table;
    width: 100%;
    height: 500px;
}
.container-center {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.container-center span {
  display: inline-block;
}

<div class="container-main">
 <div class="container-center">
  <span>
   <form>
    <input/>
    <br/>
    <input/>
    <br/>
    <button>Button</button>
   </form>
  </span>
 </div>
</div>

Make a form aligned vertically and horizontally

4 Answers4