如何在页面上垂直居中无序列表？身体对齐中心

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>

我想将无序列表居中，因为页面是文本对齐中心

Answer 1

以下是使用CSS Display Attribute包含div的一个很好的例子。

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

以下是使用其他替代方法的另一个例子。

Vertically centering a div inside another div

我修改了第一个例子来包含你的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>