CSS Centering Techniques

one of the most problems and daily tasks faced by all front-end and UI developers is that centering HTML elements in the layout so i tried to collect all CSS centering techniques which will help you to solve it and save your time 😉.

HTML elements can be divided into two categories : block level and inline elements. and will go to cover centering techniques for all of them.

1- Horizontal Center

1–1 Centering Inline-level Element

if there is an inline element i can center it horizontally by using text-align: center Ex: HTML

<nav class=”h-inline”>
<a href=”#”>nav 1</a>
<a href=”#”>nav 2</a> <a href=”#”>nav 3</a>
</nav>

and here we have nav element which is an inline element and the CSS for it will be:

div.h-inline, nav.h-inline {
text-align: center;
}

1–2 Centering Single Block Element

<div class=”h-s-block”>horizontal single block</div>

here we have a single block element has afixed width which can be horizontal aligned with below css:

div.h-s-block {
margin:0 auto;
width:150px;
}

1–2 Centering multiple Block Elements

but if we have multiple block elements which we need to horizontal align it like below

<section class=”h-m-block”>
<div>block 1</div>
<div>block 2</div>
</section>

and actualy they should have a fixed width and can be horizontal aligned with below css:

.h-m-block div {
width:50px;
height: 50px;
margin:5px;
background: #800;
color:#fff;
display: inline-block;
padding: 5px;
}

2- Vertical Center

2–1 Centering single Line of Inline Element

and now we are going to explain how to vertical algin elements and starting with a signle inline element like below span
<nav class=”v-inline-s-line”>
<a>inline element 1</a>
<a>inline element 2</a>
</nav>

we can vertical align it using line-height by below css

div.v-inline-s-line {
height:200px;
line-height: 200px;
background: #ccc;
margin: 5px;
}

2–2 Centering Multiple Line of Inline Element

but if we have a multiple inline elements like below

<div class=”v-inline-m-line”>
<p>Multiple using flex 1</p>
<p>Multiple using flex 2</p>
<p>Multiple using flex 3</p>
</div>

we can vertical aligned them by using the magic flex

div.v-inline-m-line{
height: 200px;
padding: 20px 0;
background: #ddd;
margin: 5px;
display: flex;
justify-content: center;
flex-direction: column;
}

2–3 Centering block Element

and what can we do if we have a block element.

<div class=”v-block”>
<p> Vertical Center Block Element With unknown Height</p>
</div>

here we have <p> element which with unknown height. and to align it we will use the below css:

div.v-block{
height:200px;
background: #ddd;
color:#fff;
position: relative;
margin: 5px;
}
div.v-block p {
background: #ccc;
color:#444;
position: absolute;
top:50%;
margin:0;
transform: translate(0,-50%);
}

3- Horizontal & Vertical Center

and know if we need to make the element centerded from both direction horizontal & vertical and the first case will be that the element has fixed width and height

3–1 Element of Fixed Height and Width

<div class=”h-v-fixed-width-height”>
<p>Element of Fixed Height and Width</p>
</div>

the above paragraph has afixed width and height and it will be centred by using below css

div.h-v-fixed-width-height {
position:relative;
height:200px;
background:#ddd;
margin: 5px;
}

div.h-v-fixed-width-height p{
height:100px;
padding:10px;
margin:0;
line-height:100px;
background:#f0f0f0;
position: absolute;
top:50%;
left:50%;
margin-top:-70px;
margin-left:-85px;
}

3–2 Element of Unknown Height and Width

and what how can we centered the elemment if it has unknown height and width

<div class=”h-v-flex>
<p>Element of unknown Height and Width</p>
</div>

the above <p> dosen’t has knows width and height so we will use the magic flex as below:

div.h-v-flex {
height:200px;
background: #ddd;
display:flex;
justify-content: center;
align-items:center;
}
div.h-v-flex p {
padding:10px;
margin:0;
background:#f0f0f0;
}

at the end we no know how to center inline and blocks elements horzontal and vertical, really hope that save you time and help you.

you will find a live demo in the below link

Thanks 😍