有没有什么办法让中间垂直的中间甚至有高度的变化？

Question

即时尝试使菜单垂直中间在标题div。但是这个菜单由于slideUp和slideDown而在Jquery中有高度变化。 那么即使高度随点击事件发生变化，中间是否有任何方法自动？

Answer 1

以下两个选项应该可以工作。第一个更简单，但第二个更简单。

---

OPTION 1

HTML：

<header> 
    <div id="center"></div> 
</header> 

CSS：

#center { 
position: relative; 
top: 50%; 
bottom: 50%; } 

---

OPTION 2

HTML

<div class="outer"> 
<div class="middle"> 
<div class="inner"> 

<h1>The Content</h1> 

<p>Once upon a midnight dreary...</p> 

</div> 
</div> 
</div> 

CSS

.outer { 
    display: table; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
} 

.middle { 
    display: table-cell; 
    vertical-align: middle; 
} 

.inner { 
    margin-left: auto; 
    margin-right: auto; 
    width: /*whatever width you want*/; 
} 

Answer 2

你可以试试这个，希望它会帮助你： -

 header{ 
 
      background-color: #ccc; 
 
      width: 100%; 
 
      margin: 0 auto; 
 
     } 
 
     ul { 
 
      text-align: center; 
 
      } 
 
     ul li{ 
 
      height: 40px; 
 
      list-style: none; 
 
      display: inline-flex; 
 
      align-items: center; 
 
      padding:0 10px; 
 
      }

<header> 
 
     <nav> 
 
      <ul> 
 
       <li>navigation</li> 
 
       <li>navigation</li> 
 
       <li>navigation</li> 
 
      </ul> 
 
     </nav> 
 
    </header>