How to Align a Div into a Fluid Div Horizontally and Vertically?

Question

I need to centralize a block made by a div, for instance, in the middle of the screen of a fluid grid layout. Inside this block, I want to put an image, a password field and a submit button. When I do this in a non-responsive layout with the following code, it works perfect but, in a fluid grid layout it doesn't:

#block-login {
    width: 650px;
    height: 378px;
    float: left;
    clear: both;
    margin-top: -189px;
    margin-left: -325px;
    position: absolute;
    top: 50%;
    left: 50%;
    text-align: center;
}

the fluid div I refer is one like this:

<div class="gridContainer clearfix">
     <div id="div1" class="fluid"></div>
</div>

thanks in advance.

Answer 1

There are a few methods of doing so: CSS tables, CSS transforms and CSS flexbox. I typically avoid using CSS tables, though. Both CSS transforms and flexbox solutions, unlike the fixed negative margin solution, is that they are child-dimension agnostic (size of child does not matter, fixed or fluid).

For CSS transforms, a major caveat is that the parent's dimensions (that of .gridContainer ) has to be explicitly predefined. The trick is to position it's child absolutely, but offset by 50% to the left and from the top. In order to take into account the child's own computed dimensions, we use CSS transforms to fix that. You might want to add vendor prefixes to the transform property though.

.gridContainer {
    position: relative;
    width: (have to declare);
    height: (have to declare);
}
.gridContainer > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

The other solution (which I feel is way more elegant, but lacks cross-browser support in older browsers) is to use CSS flexbox:

.gridContainer {
    display: flex;
    align-items: center;
    justify-content: center;
}

You can view the demo of both solutions here: http://jsfiddle.net/teddyrised/B7PVh/

Answer 2

This is a possible solution for you :

FIDDLE

CSS :

body,html,.gridContainer{
    width:100%;
    height:100%;
    margin:0;
    position:relative;
}
#div1 {
    width: 80%;
    height: 80%;
    margin:0;
    position: absolute;
    top: 10%;
    left: 10%;
    text-align: center;
    background:gold;
}

Answer 3

If you don't need to support IE9 and below, you can get a fixed-wdith, fixed-height div centered in a fluid container by using relative positoining and the new CSS calc() function:

<div class="gridContainer">
    <div id="#block-login"> 
    </div>
</div>

#block-login {
    position:relative;
    top:calc(50% - 189px); /* 50% - 1/2 of it's own height */
    left:calc(50% - 325px); /* 50% - 1/2 of it's own width */
}    

A jsfiddle demo

Note: caniuse.com lists "partial support" for calc() with ie-9