As developers we often find it difficult and challenging when we do not know how to center an element and what method we need to use. 
<blockquote>
Below are ways on how to center an element with css
</blockquote>
<ul>
<li>Method 1</li>
</ul>
<pre><code>el{
display: flex;
justify-content: center;
align-item: center;
height: 100vh;
}
</code></pre><ul>
<li>Method 2</li>
</ul>
<pre><code>el {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</code></pre><ul>
<li>Method 3</li>
</ul>
<pre><code>el {
width: 500px;
min-height: 100vh;
margin: auto;
// NB: Without a specified width, setting your margin to auto will not work
}
</code></pre><ul>
<li>Method 4</li>
</ul>
<pre><code>el{
text-align: center
}
</code></pre>

As developers we often find it difficult and challenging when we do not know how to center an element and what method we need to use. 

> Below are ways on how to center an element with css



- 
Method 1

```
el{
display: flex;
justify-content: center;
align-item: center;
height: 100vh;
}
``` 
- 
Method 2

```
el {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
``` 
- 
Method 3

```
el {
width: 500px;
min-height: 100vh;
margin: auto;
// NB: Without a specified width, setting your margin to auto will not work
}
``` 
- 
Method 4

```
el{
text-align: center
}
``` 









How to center elements using css

Fullstack Developer and tech enthusiast.
