Posisi Center Absolute di dalam div

<style>
.parent{
    width:400px;
    height:120px;
    position: relative;
    border:1px solid #4A00E0;
}

.centered{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);

}

.box{
    text-align: center;
    color: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    background: linear-gradient(-30deg, #4A00E0, #8E2DE2);
}
</style>

<div class="parent">
    <div class="centered box">I'm completely centered!</div>
</div>