Richard Rodgers Richard Rodgers - 2 months ago 4x
CSS Question

How do I center align a div within another div

I'm trying to center align a div that is located within another div. I want to vertically center the "options" div that is located inside the "plan-container"

Thanks in advance.

.plan-container {
width: 960px;
height: auto;
margin-top: 62px;
overflow: hidden;
background-color: red;

.options {
float: left;
width: 151px;
height: 100px;
background-color: green;

.plan {
float: left;
width: 220px;
height: 600px;
margin-left: 23px;
background-color: purple;

.plan:last-child {
float: right;

width: 300px;
height: 600px;
background-color: purple;

<div class="plan-container">
<div class="options">Options</div>
<div class="plan">Box one</div>
<div class="plan plan-featured">Box two</div>
<div class="plan">Box three</div>


You can use inline-block instead of float, and than you can use the vertical-align property:

  display: inline-block;
  vertical-align: middle;


However, beware of the whitespace issue.