How to Centralize a Float on the Screen (such horizontally as vertically) Using CSS


Tags: html,css,css-float

Problem :

good afternoon,

I'd like to create an area placed in the center of the screen using floats with fixed values for both width and height. this area must be centralized even when the screen is resized. my objective is to centralize on the screen the field Password, the buttom Login and an image. these elements must be placed within a float which must be centralized on the screen.

I'd appreciate your help.

thanks,



Solution :

Apply this to the div,

   .center {
       width: 300px;
       height: 300px;
       position: absolute;
       left: 50%;
       top: 50%; 
       margin-left: -150px;
       margin-top: -150px;
    }

Negative margins are exactly half the height and width, which pull the element back into perfect center. Only works with elements of a fixed height/width.

Updated:

See demo


    CSS Howto..

    How would I go about editing the polar clock counter clockwise?

    How to select elements using CSS selector who's attribute can have multiple values

    How to make a smooth transition for css controlled by jQuery?

    How can one pass component property values to the css/less clientlibs for that component? AEM 6.2

    How to pass a local file name to css-validator.jar?

    How do I resize a div relative to browser window size?

    How to Clear Every Third Box in a Row? [duplicate]

    How to add another line on overflow in a text input?

    How can I style a list of name-value pairs to appear like an HTML table?

    Mobile Toggle Menu - How to Push Content outside the view of the viewport?

    How do I select an element in the dom with an attribute of ct:value?

    How to align content to the bottom of a div?

    How to GPU accelerate CSS transform?

    How to adjust the position of specific elements/items/content on a page with CSS

    Show 100% of background

    HOW TO check if an external (cross-domain) CSS file is loaded using Javascript

    How do I iterate through array and set classes individually?

    How to make multiple breaks using CSS?

    CSS newbie: How to align my link to the right side of the page?

    CSS - How to insure that a input will be in the middle of a specific area

    How to break this Javascript into seperate CSS classes?

    how to increase the photoshop sprite canvas width and height

    How to keep CSS style If I change the html content dynamically?

    how to use css to display multiple posts in inline-block like google+

    How to avoid this overlapping in plain CSS?

    How to select text that is not marked up with CSS/jquery?

    How to clone an element using class name and append it to the body

    how to align buttons in css/html in one line horizontally?

    Bootstrap table how hidden, when toggled visible using javascript it does not show correctly

    How to style div's so that they don't stack right on top of each other?