Vertically center every element inside div

Question

Here is example demo of my problem

http://www.bootply.com/tkrs6G3GlG

Basicly, I've got on the left form groups, and in each I've got large text giving some information and then asking user to select something (in example is only radio, but there are dropdown's and checkboxes as well). I would like that for every form group, options on the right are vertically align (in the middle) depending on text size. In example above, radio's are on top, but I would like them in the middle of corresponding form-group.

I've tried

  .vcenter{vertical-align:middle;
     }

but it's not working. I've also tried setting height of div which contains options

 .maxHeight{
       height:100%;
 }

but div is not getting larger. I tried using large height and hide overflow, but not working. Only thing that worked so far is using

.vcenter{
      position:absolute;
      vertical-align: middle;
 }

but it only looks well on large screen, but after screen resizing, it's overlaping with text.

Possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — jperezov, Nov 20 '15 at 00:12
Try setting `margin` to `auto` and giving your `div` a width,check out answer — Collins Abitekaniza, Nov 20 '15 at 00:27

score 0 · Answer 1 · answered Nov 20 '15 at 00:18

If your div is inside another div,try

#my_div{
       margin-left: auto;
       margin-right: auto; 
       width: /*put_your_width*/;
}

And if it is the parent div

   #my_div{
         display: table;
         margin-right: auto;
         margin-left: auto;
   }

score 0 · Answer 2 · answered Nov 20 '15 at 00:18

There are a few ways to do this. I usually use this method...

HTML

<div> <p>Center this text</p> </div>

CSS

div{    
    position: relative;
    height: 500px;
    width: 500px;
    background: green;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
p{
    position: absolute;
    top:50%;
    text-align:center;
    display:inline-block;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

score 0 · Answer 3 · answered Nov 20 '15 at 01:49

0

The way I prefer to do it is add margin: auto; and top, left, right, and bottom 0 like so:

.parent {
    position: relative;
}

.child {
    margin: auto;
    position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
}

answered Nov 20 '15 at 01:49

Kyle Horkley

911
1
9
23

score 0 · Answer 4 · answered Nov 20 '15 at 10:34

you can use many aproaches.

first one is with position

    .parent_div{
          position:relative;
          width:500px;
          height:500px;
    }
    .children_div{
          position:absolute;
          width:100px;
          height:100px;
          left:0px;
          right:0px;
          top:0px;
          bottom:0px;
          margin:auto;
    }

-But you need to have specified the height and width of the child element.. so it is not good for fluid design.

Sec. aproach is the best i think it uses display :)

    .parent_div{
          display:table;
          width:500px;
          height:500px;
          text-align:center;
    }
    .children_div{
          display:table-cell;
          width:100%;
          height:100%;
          vertical-align:middle;

    }

    .children_children_div{
          /*What ever... this div will be centered verticaly*/

    }

Vertically center every element inside div

4 Answers4