It's hip to be (a centered div in a) square

by lennyekberg

HTML

<div id="container">
    <div id="element">
        <div class="center-div"></div>
    </div>
</div>

CSS

#container {
    display: inline-block;
    width: 50%;
    background-color: red;
}
#element {
    height: 0;
    padding-bottom: 100%;
    background-color: silver;
    position: relative;
}
.center-div
{
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 180px;
  height: 140px;
  background-color: #ccc;
  border-radius: 3px;
}