Center HTML Object Horizontally and Vertically

StackOverflow https://stackoverflow.com/questions/21731019

  •  10-10-2022
  •  | 
  •  

Question

I know these questions get asked tons of times, but I can't for the life of me figure out how to get my object centered vertically. Any help would be greatly appreciated!

Demo - http://jsfiddle.net/3aVjV/1/

<!doctype html>
<html lang="en" class="demo-3 demo-dark js boxshadow pointerevents placeholder">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <body>
            <div class="container">
                <service class="main">
                    <ul class="bokeh">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </service>
            </div>
        </body>

CSS

html {
    height: 100%;
    margin:0;
    padding:0;
}
*, *:after, *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
body {
    -webkit-font-smoothing: antialiased;
    overflow: hidden !important;
    margin:0;
    padding:0;
}
.container {
    width: 100%;
    position: fixed;
    margin: auto;
    height: 100%;
}
.main {
    width: 90%;
    margin: auto;
    position: relative;
}
/* DEMO 3 */
 .demo-3 body {
    background-color: #fff;
    margin:0;
    padding:0;
    overflow: hidden !important;
}
.demo-3 body:after {
    content:"";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.demo-3 .bokeh {
    font-size: 100px;
    width: .5em;
    height: .5em;
    position: relative;
    margin: auto;
    border-radius: 50%;
    border: .01em solid rgba(150, 150, 150, 0.3);
    list-style: none;
}
.demo-3 .bokeh li {
    position: absolute;
    width: .1em;
    height: .1em;
    border-radius: 50%;
}
.demo-3 .bokeh li:nth-child(1) {
    left: 50%;
    top: 0;
    margin: 0 0 0 -.05em;
    background: #00C176;
    -webkit-transform-origin: 50% 250%;
    -moz-transform-origin: 50% 250%;
    -ms-transform-origin: 50% 250%;
    -o-transform-origin: 50% 250%;
    transform-origin: 50% 250%;
    -webkit-animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
    -moz-animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
    -ms-animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
    -o-animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
    animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
}
.demo-3 .bokeh li:nth-child(2) {
    top: 50%;
    right: 0;
    margin: -.05em 0 0 0;
    background: #FF003C;
    -webkit-transform-origin: -150% 50%;
    -moz-transform-origin: -150% 50%;
    -ms-transform-origin: -150% 50%;
    -o-transform-origin: -150% 50%;
    transform-origin: -150% 50%;
    -webkit-animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
    -moz-animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
    -ms-animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
    -o-animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
    animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
}
.demo-3 .bokeh li:nth-child(3) {
    left: 50%;
    bottom: 0;
    margin: 0 0 0 -.05em;
    background: #FABE28;
    -webkit-transform-origin: 50% -150%;
    -moz-transform-origin: 50% -150%;
    -ms-transform-origin: 50% -150%;
    -o-transform-origin: 50% -150%;
    transform-origin: 50% -150%;
    -webkit-animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
    -moz-animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
    -ms-animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
    -o-animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
    animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
}
.demo-3 .bokeh li:nth-child(4) {
    top: 50%;
    left 0;
    margin: -.05em 0 0 0;
    background: #88C100;
    -webkit-transform-origin: 250% 50%;
    -moz-transform-origin: 250% 50%;
    -ms-transform-origin: 250% 50%;
    -o-transform-origin: 250% 50%;
    transform-origin: 250% 50%;
    -webkit-animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;
    -moz-animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;
    -ms-animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;
    -o-animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;
    animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;
}
@-webkit-keyframes rota {
    to {
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes rota {
    to {
        -moz-transform: rotate(360deg);
    }
}
@-ms-keyframes rota {
    to {
        -ms-transform: rotate(360deg);
    }
}
@-o-keyframes rota {
    to {
        -o-transform: rotate(360deg);
    }
}
@keyframes rota {
    to {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes opa {
    12.0% {
        opacity: 0.80;
    }
    19.5% {
        opacity: 0.88;
    }
    37.2% {
        opacity: 0.64;
    }
    40.5% {
        opacity: 0.52;
    }
    52.7% {
        opacity: 0.69;
    }
    60.2% {
        opacity: 0.60;
    }
    66.6% {
        opacity: 0.52;
    }
    70.0% {
        opacity: 0.63;
    }
    79.9% {
        opacity: 0.60;
    }
    84.2% {
        opacity: 0.75;
    }
    91.0% {
        opacity: 0.87;
    }
}
@-moz-keyframes opa {
    12.0% {
        opacity: 0.80;
    }
    19.5% {
        opacity: 0.88;
    }
    37.2% {
        opacity: 0.64;
    }
    40.5% {
        opacity: 0.52;
    }
    52.7% {
        opacity: 0.69;
    }
    60.2% {
        opacity: 0.60;
    }
    66.6% {
        opacity: 0.52;
    }
    70.0% {
        opacity: 0.63;
    }
    79.9% {
        opacity: 0.60;
    }
    84.2% {
        opacity: 0.75;
    }
    91.0% {
        opacity: 0.87;
    }
}
@-ms-keyframes opa {
    12.0% {
        opacity: 0.80;
    }
    19.5% {
        opacity: 0.88;
    }
    37.2% {
        opacity: 0.64;
    }
    40.5% {
        opacity: 0.52;
    }
    52.7% {
        opacity: 0.69;
    }
    60.2% {
        opacity: 0.60;
    }
    66.6% {
        opacity: 0.52;
    }
    70.0% {
        opacity: 0.63;
    }
    79.9% {
        opacity: 0.60;
    }
    84.2% {
        opacity: 0.75;
    }
    91.0% {
        opacity: 0.87;
    }
}
@-o-keyframes opa {
    12.0% {
        opacity: 0.80;
    }
    19.5% {
        opacity: 0.88;
    }
    37.2% {
        opacity: 0.64;
    }
    40.5% {
        opacity: 0.52;
    }
    52.7% {
        opacity: 0.69;
    }
    60.2% {
        opacity: 0.60;
    }
    66.6% {
        opacity: 0.52;
    }
    70.0% {
        opacity: 0.63;
    }
    79.9% {
        opacity: 0.60;
    }
    84.2% {
        opacity: 0.75;
    }
    91.0% {
        opacity: 0.87;
    }
}
@keyframes opa {
    12.0% {
        opacity: 0.80;
    }
    19.5% {
        opacity: 0.88;
    }
    37.2% {
        opacity: 0.64;
    }
    40.5% {
        opacity: 0.52;
    }
    52.7% {
        opacity: 0.69;
    }
    60.2% {
        opacity: 0.60;
    }
    66.6% {
        opacity: 0.52;
    }
    70.0% {
        opacity: 0.63;
    }
    79.9% {
        opacity: 0.60;
    }
    84.2% {
        opacity: 0.75;
    }
    91.0% {
        opacity: 0.87;
    }
}
Was it helpful?

Solution

Did you invent the <service> tag? That's invalid markup, and as far as the centering goes, use position: absolute; instead.

Demo

.main {
    border: 1px solid #ddd; /* You can get rid of this, just for test purpose */
    margin: auto;
    position: absolute;
    height: 50px;
    width: 50px;
    top: 50%; /* 50% from top */
    left: 50%; /* 50% from left */
    margin-top: -25px; /* 1/2 of height which will set the top offset */
    margin-left: -25px; /* 1/2 if width which will set the left offset */
}

OTHER TIPS

Real simple..

  1. get window height
  2. get object height
  3. divide window height by 2, divide object height by 2.
  4. subtract object/2 from window/2. This is your top margin for the object.

Voila.

Similar approach to Mr. Alien, but I modified your .main and your .demo-3 .bokeh classes (below):

.main {
    width: 90%;
    margin: auto;
}

.demo-3 .bokeh {
    font-size: 100px;
    width: .5em;
    height: .5em;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -25px;
    margin-left: -25px;
    border-radius: 50%;
    border: .01em solid rgba(150,150,150,0.3);
    list-style: none;
}

JSFiddle here

This solution works even if one day you decide to change the loader size.

Basically, changed the parent to have a position absolute and I did some magic for the child But you can center anything using this technique. Check link for the result

.main {
width: 100%;
height: 100%;
margin: auto;
position: absolute;
}

.demo-3 .bokeh {

font-size: 100px;
position: absolute;

width: .5em;
height: .5em;

border-radius: 50%;
border: .01em solid rgba(150,150,150,0.3);
list-style: none;

margin: auto;
left: 0;
right: 0;
bottom: 0;
top: 0;
}

Fiddle: http://jsfiddle.net/ositoozy/A6QRU/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top