将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.

Answer 1

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;
   }

Answer 2

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%);
}

Answer 3

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;
}

Answer 4

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*/

    }