CSS: center element vertically

Suppose we have a container with a child div in it, and we want to center the div vertically in the container, and it should be centered in the container even if the width of the contain is changed. For example, here is the html div:

<div id="container">
    <div id="child">vertically centered</div>
</div>

Here is the css for the above div to center the child element vertically.

#container{
    background:green;
    width:200px;
    height:300px;
}
#child{
	background: red;
	height: 100px;
	position: relative;
	top: 50%;
	transform: 			translateY(-50%);
}
vertically centered

Search within Codexpedia

Custom Search

Search the entire web

Custom Search