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

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

这是一个在包含div上使用CSS Display属性的好例子。

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

这是使用某些替代方法的另一个示例。

将div垂直居中放置在另一个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>