<div> 元素垂直居中答案

【问题标题】：Vertically centering a <div> element<div> 元素垂直居中
【发布时间】：2013-03-14 03:24:59
【问题描述】：

我一直在尝试将侧边栏垂直居中，但我将其水平居中。我知道 display:table;但这不是我想做的，因为我将把主要内容区域放在边栏旁边。这是代码和样式：

<div class="sidebar">
    <ul>
        <li>Homepage</li>
        <li>blah</li>
        <li>blah</li>
        <li>blah</li>
        <li>blah</li>
        <li>blah</li>
        <li>blah</li>
        <li>blah</li>
    </ul>   
</div>

CSS：

div.sidebar{
    background-color:       #DEFFFF;
    width:                  156px;
    height:                 385px;
}

div.sidebar a{
    color:                  black;
    display:                block;
}

div.sidebar ul li{
    margin-left:            -33px;
    list-style-type:        none;
    width:                  140px;
    height:                 25px;
    border-right:           1px solid black;
    border-top:             1px solid black;
    border-left:            1px solid black;
    background-color:       #BCA264;
    font-family:            bold;
}

【问题讨论】：

标签： css html alignment html-lists sidebar

【解决方案1】：

CSS3 解决方案：http://jsfiddle.net/RazvanGirmacea/HDyuX/

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-pack: center;

display: -moz-box;
-moz-box-orient: vertical;
-moz-box-pack: center;

display: box;
box-orient: vertical;
box-pack: center;

【讨论】：

【解决方案2】：

<div class="parentPanel">
  <div class="content">
    <img src="http://placehold.it/400x500">
  </div>
  <div class="sidebar">
    <ul>
      <li>Homepage</li>
      <li>blah</li>
      <li>blah</li>
      <li>blah</li>
      <li>blah</li>
      <li>blah</li>
      <li>blah</li>
      <li>blah</li>
    </ul>
  </div>
</div>

并使用以下 CSS

.parentPanel {
    border: 1px solid blue;
}
.content {
    border: 1px solid blue;
    display: inline-block;
    vertical-align: middle;
}
.content img {
    display: block;
}
.sidebar {
    border: 1px solid blue;
    display: inline-block;
    vertical-align: middle;
}

您可以根据需要调整内容区域的大小，并相应地设置侧边栏和链接的样式。

供参考：http://jsfiddle.net/audetwebdesign/KUFRK/

注意
我假设内容区域比导航栏列表高。

【讨论】：