How to vertically center an unordered list on a page? body is aligned center

Question

<div id="header">
    <h3>The first header</h1>
    <p>This is a sample paragraph with unordered list</p>
    <ul>
        <li>first item</li>
        <li>second item</li>
        <li>third item</li>
    </ul>   
</div>

I want to center the unordered list as the page is text aligned center

Answer 1

Here is a great example using the CSS Display Attribute on containing divs.

https://stackoverflow.com/a/6182661/4347337

Here is another example using some alternative methods.

Vertically centering a div inside another div

I modified the first example to contain your html.

.outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}
.middle {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
.inner {
  margin-left: auto;
  margin-right: auto;
  width: 350px;
  background-color: lightgray;
  border: 1px solid black;
}

<div class="outer">
  <div class="middle">
    <div class="inner">
      <h3>The first header</h3>
      <p>This is a sample paragraph with unordered list</p>
      <ul>
        <li>first item</li>
        <li>second item</li>
        <li>third item</li>
      </ul>
    </div>
  </div>
</div>