Top and Bottom Padding

Child Element
Child Element
Container outlined in yellow
<div id="parent">
  <div class="container">
    <div class="child"></div>
    <div class="child"></div>
#parent {
  height: 300px;

.child {
  height: 100px;

onload=function() {

  var container = document.getElementById("container");
  var divWidth = container.offsetWidth;
  var divHeight = container.offsetHeight;
  var parent = document.getElementById("parent");
  parentHeight = parent.offsetHeight; = (parentHeight - divHeight) / 2 + "px"; = (parentHeight - divHeight) / 2 + "px"; = parentHeight - (parentHeight - divHeight) + "px";


This method sets the top and bottom padding to be equal. Assuming the height of both container and parent is known, the leftover is divided in half and set as the top and bottom values for padding on the parent.

Since the height of the container isn't known, Javascript is used to determine it and then set the paddings.

There's a got'cha in that setting paddings means the parent height likely needs adjusting. There are 2 ways to avoid this got'cha.

Note: This method assumes the height of the parent element and each child element is fixed and known. However, the number of child elements is unknown and the total height of child elements is dynamic.

Additional styles not related to the above have been used to make this demo more presentable.