5 Ways to Center Stuff

Method 1

RESULT:

HTML:

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

CSS:

.container{
    position: relative;
    height: 200px;
    width: 800px;
}    
.box{
    height: 80px;
    width: 80px;
    background-color:#20C4D5;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Method 2

RESULT:

HTML:

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

CSS:

.container{
    position: relative;
    height: 200px;
    width: 800px;
}    
.box{
    height: 80px;
    width: 80px;
    background-color:#20C4D5;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

Method 3

RESULT:

HTML:

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

CSS:

.container{
    height: 200px;
    width: 800px;
    display: flex;
    align-items: center;
    justify-content: center;
}    
.box{
    height: 80px;
    width: 80px;
    background-color:#20C4D5;
}

Method 4

RESULT:

HTML:

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

CSS:

.container{
    height: 200px;
    width: 800px;
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 100%;
}    
.box{
    height: 80px;
    width: 80px;
    background-color:#20C4D5;
    justify-self: center;
    align-self: center;
}

Method 5

RESULT:

HTML:

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

CSS:

.container{
    height: 200px;
    width: 800px;
    display: flex;
}    
.box{
    height: 80px;
    width: 80px;
    background-color:#20C4D5;
    margin: auto;
}

Center Stuff With CSS 5 Quick Ways

Method 1

RESULT:

HTML:

CSS:

Method 2

RESULT:

HTML:

CSS:

Method 3

RESULT:

HTML:

CSS:

Method 4

RESULT:

HTML:

CSS:

Method 5

RESULT:

HTML:

CSS:

Center Stuff With CSS
5 Quick Ways

5 Ways To Center Stuff