Our Blog

Absolutely Centered in a Container

Nikolay Ninarski
by Nikolay Ninarski on Tue 13 October 2015 No comments

This is our first of series of blog posts for front-end tips and tricks. All of them are going to be short instructions on how to get something working.

So if you want to center a decorative element inside a container (either a video icon or something else) you can use an :after pseudo-class to define and style it.

 

.container {
    position: relative;
}
.container:after {
    content: ''; /* if you skip this the after won't show */
    display: inline-block; /* to make it behave like an image */
    height: 20px; /* whatever sizes you'd like */
    width: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
}

This CSS makes the top-left corner of our :after element to be positioned in the center of the container. However, to be truly center the centers of the both the container and the :after element should be located on the same pixel. To achieve this you can add the following:

.container:after{
    margin-top: -10px /* (the height of the :after)/2 */
    margin-left: -10px /* (the width of the :after)/2 */
}

There you have it

Nikolay NinarskiAbsolutely Centered in a Container

Join the conversation