HomeCSS5 Awesome Ways To Center With CSS

5 Awesome Ways To Center With CSS

Are you having trouble with centring elements with CSS? No matter how much try to master CSS, centring always remains somewhat tricky? All your worries end here because today, I bring you five methods to centre stuff with CSS. Need to centre text, images, div, headings? I have got it all covered for you. Let us get started.

Video Tutorial:

If you prefer to code along instead of downloading codes, you should check out the video tutorial. And for more such video tutorials, subscribe to my youtube channel.

Method 1:

The first method can be used when the dimensions of the child are known. The dimensions of the container can be unknown here. This is one of the most common methods to centre div elements.

HTML:

<div class="container">
   <div class="child"></div>
</div>

CSS:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.container{
    position: relative;
    height: 100vh;
    width: 100vw;
    background-color: #101010;
}
.child{
    position: absolute;
    height: 200px;
    width: 200px;
    background-color: #2a8ae7;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}

Method 2:

This method uses absolute positioning and transforms to center the element.

HTML:

<div class="container">
        <div class="child">
            This is sample text
        </div>
</div>

CSS:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.container{
    height: 100vh;
    width: 100vw;
    background-color: #101010;
    position: relative;
}
.child{
    background-color: #2a8ae7;
    color: #ffffff;
    position: absolute;
    padding: 20px;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}

Method 3:

For the third method we make use of the flex layout. This method is one of my favourites. It can be used center text, images and divs perfectly almost everytime.

HTML:

<div class="container">
    <div class="child"></div>
</div>

Other tutorials you might like:

CSS:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.container{
    height: 100vh;
    width: 100vw;
    background-color: #101010;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.child{
    height: 200px;
    width: 200px;
    background-color: #2a8ae7;
}

Method 4:

The fourth method makes use of the grid layout, I have been using this method ever since I learned CSS grids and it is the easiest and quickest way to center stuff.

HTML:

<div class="container">
    <div class="child"></div>
</div>

CSS:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.container{
    height: 100vh;
    width: 100vw;
    background-color: #101010;
    position: relative;
    display: grid;
    place-items: center;
}
.child{
    height: 200px;
    width: 200px;
    background-color: #2a8ae7;
}

Method 5:

Coming to the last method, though this method isn’t commonly used for centering, I am leaving it here incase you ever need it.

HTML:

<div class="container">
   <div class="child"></div>
</div>

CSS:

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.container{
    height: 100vh;
    width: 100vw;
    background-color: #101010;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}
.child{
    display: inline-block;
    height: 200px;
    width: 200px;
    background-color: #2a8ae7;
}

That’s all for this tutorial. I hope you liked the tutorial. If you know any other methods do let me know in the comments. I would also like to know, which among these to you commonly use to center? Also all suggestions and feedbacks are welcome. Stay tuned for more tutorials.

RELATED ARTICLES

Tooltips With CSS

Cowboy CSS Art

4 COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

6 + eleven =

Most Popular

Truncate Text App Javascript

Tooltips With CSS

Cowboy CSS Art