Is There A Way I Can Use Css3 Calc To Place A Dialog In The Center Of My Screen?

I am trying to use the following:

...

CSS: .center{ position: absolute; height: 50px; width: 50px; background:red; to

Solution 1:

You can use new display: flex

CSS

#overlay {
    height: 100%;
    width: 100%;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.dialog {
    margin: auto;
    width: 280px;
}

jsFiddle

Browser Support

Firefox, Safari 6, IE 11 (maybe 10), Opera, Chrome

Solution 2:

why not use the top: 0; bottom: 0; left: 0; right: 0; trick?

http://jsfiddle.net/3n1gm4/WpYHS/

html:

<divclass="centered"><h1>Perfectly Centered</h1><h3>This is centered top to bottom and left to right</h3></div>

CSS:

.centered {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 50%; /* any width */height: 30%; /* any height */margin: auto;

    text-align: center;

    background: #deface;
}

Solution 3:

Why don't you use:

.center {
    position: absolute;
    height: 50px;
    width: 50px;
    background: red;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
}

or:

.center {
    position: absolute;
    height: 50px;
    width: 50px;
    background: red;
    margin-top: -25px;
    margin-left: -25px;
    top: 50%;
    left: 50%;
}

Solution 4:

I think you should use:

.center {
    float: none;
    margin-left: auto;
    margin-right: auto;
}