Home/ Questions/Q 7007047
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T21:33:24+00:00

I’m trying to center both horizontally and vertically a div inside an outer div.

  • 0

I’m trying to center both horizontally and vertically a div inside an outer div. It works when the outer div has specific width and height set in pixels like 

#countdownBox {
    width: 700px;
    height: 500px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

but it fails when the height and width are percentages like

#countdownBox {
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

Why is this and is there a work around?

EDIT Here is the HTML with container CSS:

#countdownBoxContainer {
width: 100%;
height: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
}

<div id="countdownBoxContainer">
    <div id="countdownBox">
      <div>
        hi there
      </div>
    </div>
 </div>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Based on the fact that you have width and height of 100% declared I’m going to assume that you’re not expecting anyone to have to scroll here. See this Fiddle where I have a working solution based on those parameters.

    Remember that display: table-cell; acts exactly like <td> elements and they won’t render correctly unless they’re in a <table> (or a container that is display: table;).

    The other problem is that <html> and <body> aren’t necessarily the height of the screen if the content is very small. html, body { height: 100%; } fixes this but it’s a bit hacky.

    • 0