How to position an <input> in the center of the <div>

alignment, css, html

Solution

Here is an edit of Kilian Stinson code that does not require CSS3 support. Instead of `translate` I use `em's`:

HTML:

<div class="check">
      <input class="center" type="checkbox">
</div>

CSS:

.check {
    width: 40px;
    height: 80px;
    outline: 1px solid red;
    position: relative;
}

.center {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -.5em;
    margin-top: -.5em;
}

JSFiddle: http://jsfiddle.net/Yzhnf/4/

Problem

My HTML looks like this: ``` <div class="item"> <div class="check"> <input type="checkbox"> </div> <div class="descr"> ... </div> <div class="details"> ... </div> </div> ``` How do I align the checkbox in the middle of the `div.check`, both horizontally and vertically? (the height of the `".item"` div is dynamic)

Original source