Vertically and horizontally centers a child element within its parent element using CSS transforms.
position
of the parent to relative
and that of the child to absolute
to place it in relation to its parent.left: 50%
and top: 50%
to offset the child 50% from the left and top edge of the containing block.transform: translate(-50%, -50%)
to negate its position, so that it is vertically and horizontally centered.height
and width
of the parent element is for demonstration purposes only.<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;
}
Snippet collection
A collection of techniques for centering HTML elements in any situation using CSS.
CSS, Layout
Horizontally and vertically centers a child element within a parent element using flexbox.
CSS, Layout
Horizontally and vertically centers a child element within a parent element using grid
.
CSS, Layout
Vertically and horizontally centers a child element within its parent element, using display: table
.