Privacy Policy
Snippets index

  CSS: How To Center an Object Exactly In The Center

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

To center text in a div, set line-height equal to height:

.center {
    height: 400px;
    line-height: 400px; /* same as height! */
}

or, add this css to the div that you want to center:

/* Center vertically tile content: */
/* https://stackoverflow.com/questions/6071987/line-height-as-a-percentage-not-working#33221185 */
.center:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

References: