How to Vertically Center a Child Element Inside a Div?

Center Element Vertically Within a

Element

When aligning elements within a web page, understanding the difference between aligning elements relative to the window or relative to their parent container is crucial. While using left: 50%; centers an element within the entire window, aligning an element within its direct parent

requires a different approach.

To achieve vertical centering within a

, follow these steps:

1. Add text-align:center; to the parent
   . This ensures that all its child elements are aligned horizontally to the center.
2. For the child element to be vertically centered, apply margin:auto;. This instructs the browser to automatically adjust the top and bottom margins of the element to distribute the remaining space evenly.

An example HTML and CSS code that demonstrates this:

<div>
<pre class="brush:php;toolbar:false">#parent {
  text-align: center;
}

#child {
  margin: auto;
}

In this example, the child element is centered both horizontally and vertically within the parent

.