Question

我试图将导航面板垂直居中，以便它以~940px及以上的所有屏幕为中心。我发现了这篇文章CSS-Tricks，但我无法有效地使用我当前的代码实现这一点。

HTML

    <body>

    <!-- Header -->
    <div class="header">

        <a href="#"><i id="nav-button" class="fa fa-2x fa-navicon"></i></a>

        <header class="logo">
            <a href="index.html"><img src="../Assets/images/logo.png" alt=""></a>
        </header>

        <a href="#"><i id="account-control" class="fa fa-2x fa-user"></i></a>

    </div>

<!-- Content Wrapper-->
<div class="wrapper">

    <!--  Content  -->
    <div id="content">
    </div>

    <!-- Collapsible Menu -->
    <div id="nav-sidebar">

        <div class="nav-items">

            <nav class="mainmenu">
                <ul>
                    <li class="active"><a href="#"><i class="fa fa-dashboard" alt="Dashboard"></i></a></li>
                    <li><a href="#"><i class="fa fa-dollar" alt="Billing"></i></a></li>
                    <li><a href="#"><i class="fa fa-support" alt="Support"></i></a></li>
                    <li><a href="#"><i class="fa fa-cubes" alt="Servers"></i></a></li>
                    <li><a href="#"><i class="fa fa-cogs" alt="Settings"></i></a></li>
                    <li><a href="#"><i class="fa fa-bar-chart-o" alt="Reports"></i></a></li>
                </ul>
            </nav>

        </div>

    </div>
</div>

CSS

/* Core */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  display: block;
  font-family: "Open Sans", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.42857;
  color: black;
  background-color: white;
}

ul {
  margin: 0;
  padding: 0;
  -webkit-margin-before: 0em;
  -webkit-margin-after: 0em;
  -webkit-padding-start: 0px;
}

.wrapper {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 75px;
  z-index: 0;
}

#content {
  position: relative;
  left: 0;
  z-index: 0;
  height: 100%;
  overflow: auto;
}

/* Header */
.header {
  background-color: white;
  width: 100%;
  height: 75px;
  position: absolute;
  top: 0;
  z-index: 2;
  box-shadow: 1px 0 1px #bdc3c7;
}

#nav-button {
  color: #555c60;
  position: absolute;
  left: 40px;
  top: 35%;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  transition: transform 0.2s;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

#nav-button.nav-button-open {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  transition: transform 0.2s;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  font-smoothing: antialiased;
}

.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#account-control {
  color: #555c60;
  position: absolute;
  right: 40px;
  top: 35%;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  transition: transform 0.2s;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
/* Navigation Sidebar */
#nav-sidebar {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  width: 80px;
  background: none;
  opacity: 1;
  z-index: 1;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  transition: all 0.2s;
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  transform: translateX(-100%);
}
#nav-sidebar:after {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  content: '';
  opacity: 1;
}
#nav-sidebar:before {
  content: '';
  height: 100%;
  vertical-align: middle;
}

.nav-sidebar-open #nav-sidebar {
  visibility: visible;
  -webkit-transition-timing-function: ease-in-out;
  -moz-transition-timing-function: ease-in-out;
  transition-timing-function: ease-in-out;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -webkit-transform;
  transition-property: transform;
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  transform: translateX(0);
  -webkit-transition-speed: 0.2s;
  -moz-transition-speed: 0.2s;
  transition-speed: 0.2s;
}
.nav-sidebar-open #nav-sidebar:after {
  width: 0;
  height: 0;
  opacity: 0;
}

.nav-items {
  position: relative;
  box-shadow: 1px 1px 1px #bdc3c7;
  vertical-align: middle;
}

.mainmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mainmenu ul li {
  display: block;
  text-align: center;
}
.mainmenu ul li a {
  position: relative;
  display: inline-block;
  color: #555c60;
  text-decoration: none;
  font-size: 18px;
  line-height: 80px;
  height: 80px;
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-transition: background .4s ease-in-out;
  -moz-transition: background .4s ease-in-out;
  transition: background .4s ease-in-out;
  -webkit-transition-property: color,text;
  -webkit-transition-duration: .3s, .3s;
  -webkit-transition-timing-function: linear, ease-in-out;
  -moz-transition-property: color,text;
  -moz-transition-duration: .3s;
  -moz-transition-timing-function: linear, ease-in-out;
  -o-transition-property: color,text;
  -o-transition-duration: .3s, .3s;
  -o-transition-timing-function: linear, ease-in-out;
}
.mainmenu ul li a:hover, .mainmenu ul li a:active {
  background: #3498db;
  color: white;
  -webkit-transition: background .4s ease-in-out;
  -moz-transition: background .4s ease-in-out;
  transition: background .4s ease-in-out;
  -webkit-transition-property: color,text;
  -webkit-transition-duration: .3s, .3s;
  -webkit-transition-timing-function: linear, ease-in-out;
  -moz-transition-property: color,text;
  -moz-transition-duration: .3s;
  -moz-transition-timing-function: linear, ease-in-out;
  -o-transition-property: color,text;
  -o-transition-duration: .3s, .3s;
  -o-transition-timing-function: linear, ease-in-out;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
  font-smoothing: antialiased;
}
.mainmenu ul li a:first-child {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.mainmenu ul li a:last-child {
  border-bottom: none;
}
.mainmenu ul li a i {
  margin: 20px;
}

JS

jQuery(document).ready(function($) {

/* Sidebar */

    $('#nav-button').click(function() {
        $('#nav-button').toggleClass('nav-button-open');
        $('body').toggleClass('nav-sidebar-open');
        return false;
    });
});(jQuery);

P.S。（不要害怕190行CSS，~90行是你可以忽略的CSS转换。）

此外，这里有jsFiddle供你玩。非常感谢你提前帮助。

Answer 1

我猜这是滑出的面板，如果视口是940px或更宽，你想要垂直对齐到视口的高度。我不确定其他事情，所以我设法实现了这一点，但我不得不清理一下。随意使用您需要的部件并丢弃另一部件。定位并不是一个好主意：修复包装器，不知道为什么要这样做。也不知道为什么你有一个显示器：阻挡身体。

DEMO：http://jsbin.com/zaguzo/1

相同的HTML，相同的jQuery

您可能还想添加一个最小高度，这是一个演示：http://jsbin.com/wegow/1

最相关的是以下内容，但还有许多其他事情需要调整：

/* --- added --- */
@media (min-width:940px) { 

    #nav-sidebar {
        top: 50%;
        margin-top: -213px;
        /*height of total of this div by 2 minus 1/2 height of header */
    }
}

<强> CSS

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

body,
html {
    margin: 0; /* -- added  -- */
    padding: 0; /* -- added  -- */
}

body {
    font-family: "Open Sans", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.42857;
    color: black;
    background-color: white;
}

ul {
    margin: 0;
    padding: 0;
}

/* -- wrapper not needed .wrapper {} -- */

#content {
    position: relative;
    z-index: 0;
    padding:95px 20px 20px 20px;
    transition: padding .5s ease-in-out;

}

.nav-sidebar-open #content {padding-left:100px;}


/* Header */

.header {
    background-color: white;
    height: 75px;
    position: absolute;
    top: 0;
    z-index: 2;
    box-shadow: 1px 0 1px #bdc3c7;
    width: 100%;
}

#nav-button {
    color: #555c60;
    position: absolute;
    left: 40px;
    top: 35%;
    -webkit-transition: -webkit-transform 0.2s;
    -moz-transition: -moz-transform 0.2s;
    transition: transform 0.2s;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: antialiased;
    font-smoothing: antialiased;
}

#nav-button.nav-button-open {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
}

.logo {
    position: absolute;
    top: 50%;
    left: 50%;
}

#account-control {
    color: #555c60;
    position: absolute;
    right: 40px;
    top: 35%;
}

/* Navigation Sidebar */

#nav-sidebar {
    position: fixed;
    top:75px;
    left: -88px;
    width: 80px;
    background: none;
    z-index: 1;
    transition: all .5s ease-in-out;
}

.nav-sidebar-open #nav-sidebar {
  left:0;
}

.nav-items {
    position: relative;
    box-shadow: 1px 1px 1px #bdc3c7;
}

.mainmenu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mainmenu ul li {
    display: block;
    text-align: center;
}

.mainmenu ul li a {
    position: relative;
    display: block;
    color: #555c60;
    text-decoration: none;
    font-size: 18px;
    line-height: 80px;
    height: 80px;
    width: 100%;
  background:#fff;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}


/* --- added --- */
@media (min-width:940px) { 

    #nav-sidebar {
        top: 50%;
        margin-top: -213px;
        /*height of total of this div by 2 minus 1/2 height of header */
    }
}

垂直居中div响应

1 个答案:

DEMO：http://jsbin.com/zaguzo/1