5 ways to center object

by dunerunner

HTML

1
<div class="wrap one">
    <div class="center one"></div>
</div>
2
<div class="wrap two">
    <div class="center two"></div>
</div>
3
<div class="wrap three">
    <div class="center three"></div>
</div>
4
<div class="wrap four">
    <div class="center four"></div>
</div>
5
<div class="wrap five">
    <div class="center five"></div>
</div>

CSS

.wrap {
    width:100px;
    height:100px;
    background:green;
}
.center {
    width:50px;
    height:50px;
    background:orange;
}
.wrap.one {
    position:relative;    
}
.center.one {
    position:absolute;
    top:50%;
    left:50%;
    margin:-25px 0 0 -25px;
}
.wrap.two {
    display:table-cell;
    vertical-align:middle;
}
.center.two {
    margin:auto;
}
.wrap.three {
    position:relative;
}
.center.three {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}
.wrap.four {
    position:relative;
}
.center.four {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
.wrap.five {
    display:flex;
    justify-content:center;
    align-items:center;
}
.center.five {
    justify-content:center;
}