Transform centering
Vertically and horizontally centers a child element within its parent element using CSS transforms.
- Set the
position
of the parent torelative
and that of the child toabsolute
to place it in relation to its parent. - Use
left: 50%
andtop: 50%
to offset the child 50% from the left and top edge of the containing block. - Use
transform: translate(-50%, -50%)
to negate its position, so that it is vertically and horizontally centered.
<div class="parent"> <div class="child">Centered content</div> </div>
.parent { border: 1px solid #9C27B0; height: 250px; position: relative; width: 250px; } .child { left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); text-align: center; }