CSS Layout How to - Align tall div element to the center

Question

We would like to know how to align tall div element to the center.

Answer


<!--  ww w . ja  v a2s  .c o m-->
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.content-body {
  position: relative;
  width: 400px;
  margin: 0 auto;
}

.left-content-bar {
  position: absolute;
  width: 10px;
  left: 0;
  top: 0;
  bottom: 0;
  background: #cff;
}

.right-content-bar {
  position: absolute;
  width: 10px;
  top: 0;
  right: 0;
  bottom: 0;
  background: #cff;
}

.inner-content {
  padding: 0 10px;
}
</style>
</head>
<body>
  <div class="content-body">
    <div class="left-content-bar siteborder"></div>
    <div class="inner-content">
      <p>Aliquid, elementum phasellus dolorum quis autem posuere
        assumenda aliquid sequi maecenas primis. Reiciendis laboris pariatur
        praesentium provident facilisi! Felis nostrud, labore labore elit,
        ornare minim ducimus proident nec condimentum excepteur odio,
        faucibus. Necessitatibus facilisis saepe facilis arcu lobortis fames
        ad morbi sociis semper cumque porro! Dis inceptos, auctor. Magnam
        hic reprehenderit pede? Nostrud euismod urna, aliquip, laborum
        quisque nostrud ridiculus, nostrud eaque assumenda per pariatur
        habitant, dolore optio illum hendrerit dictum cupidatat, sit sapien,
        sociis.</p>
    </div>
    <div class="right-content-bar siteborder"></div>
  </div>
</body>
</html>

The code above is rendered as follows: