如何將一個漢堡圖標垂直居中在一個div中？

Question

我有一個包含有3 <span>做一個漢堡圖標是另一個元素中的導航菜單：

.navbar { 
 
    width: 100%; 
 
    color: #fff; 
 
    background-color: #df0024; 
 
    padding: 1% 0; 
 
} 
 

 
.tog { 
 
    display: flex; 
 
    cursor: pointer; 
 
    float: right; 
 
    width: 6%; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: auto; 
 
} 
 

 

 
/*This is the div that contain the burger 3 layers*/ 
 

 
#nav-icon { 
 
    height: -webkit-fill-available; 
 
    height: -moz-fill-available; 
 
    height: -o-fill-available; 
 
    height: fill-available; 
 
    position: relative; 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    -webkit-transition: .5s ease-in-out; 
 
    -moz-transition: .5s ease-in-out; 
 
    -o-transition: .5s ease-in-out; 
 
    transition: .5s ease-in-out; 
 
    cursor: pointer; 
 
} 
 

 
/*/The style of each of the burger icon 3 layers*/ 
 
#nav-icon span { 
 
    display: block; 
 
    position: absolute; 
 
    height: 3.1vh; 
 
    width: 100%; 
 
    background: white; 
 
    border-radius: 9px; 
 
    opacity: 1; 
 
    left: 0; 
 
    -webkit-transform: rotate(0deg); 
 
    -moz-transform: rotate(0deg); 
 
    -o-transform: rotate(0deg); 
 
    transform: rotate(0deg); 
 
    -webkit-transition: .25s ease-in-out; 
 
    -moz-transition: .25s ease-in-out; 
 
    -o-transition: .25s ease-in-out; 
 
    transition: .25s ease-in-out; 
 
} 
 

 
#nav-icon span:nth-child(1) { 
 
    top: 0px; 
 
} 
 

 
#nav-icon span:nth-child(2) { 
 
    top: 12px; 
 
} 
 

 
#nav-icon span:nth-child(3) { 
 
    top: 24px; 
 
}

<nav class="navbar"> 
 
    <div class="logo"> 
 
    <a href="#"><img src="" alt='Logo' /></a> 
 
    </div> 
 
    <div id='tog' class="tog"> 
 
    <label for="toggle" id='nav-icon'> 
 
    \t \t \t <div class='icon-container'> 
 
    \t \t \t \t <span></span> 
 
    \t \t \t \t <span></span> 
 
    \t \t \t \t <span></span> \t 
 
    \t \t \t </div> \t \t \t \t \t \t \t \t 
 
     \t </label> 
 
    </div> 
 
</nav>

如何居中#nav-icon垂直內#nav-icon span？我想要的是將漢堡圖標居中，所以我不在意改變包含漢堡圖標的其他元素樣式。

Answer 1

我不得不做很多工作，但我用了一個很好的垂直居中技巧，我知道top: 50%;加上transition: translateY(-50%);。如果你將這些應用到子div，那麼它將在一個大小的父級中垂直居中（父級也應該具有位置relative或absolute）。

我在代碼中將這些樣式應用於.icon-container。

.navbar{ 
 
    width: 100%; 
 
    position: relative; 
 
    color: #fff; 
 
    background-color: #df0024; 
 
    padding: 1% 0; 
 
} 
 

 
.tog { 
 
    display: flex; 
 
    cursor: pointer; 
 
    float: right; 
 
    width: 6%; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    align-items: center; 
 
    justify-content: center; 
 
    height: auto; 
 
} 
 

 
/*This is the div that contain the burger 3 layers*/ 
 
#nav-icon{ 
 
    position: absolute; 
 
    top:0; 
 
    bottom:0; 
 
    left:0; 
 
    right: 0; 
 
    -webkit-transition: .5s ease-in-out; 
 
    -moz-transition: .5s ease-in-out; 
 
    -o-transition: .5s ease-in-out; 
 
    transition: .5s ease-in-out; 
 
    cursor: pointer; 
 
} 
 

 
.icon-container { 
 
    padding: 0 5px; 
 
    box-sizing: border-box; 
 
    position: relative; 
 
    top: 50%; 
 
    -ms-transform: translateY(-50%); /* IE 9 */ 
 
    -webkit-transform: translateY(-50%); /* Chrome, Safari, Opera */ 
 
    transform: translateY(-50%); 
 
} 
 

 

 
#nav-icon span{ 
 
     display: block; 
 
     width: 100%; 
 
     height: 5px; 
 
     margin-bottom: 3px; 
 
     background: white; 
 
     border-radius: 9px; 
 
     opacity: 1; 
 
     -webkit-transition: .25s ease-in-out; 
 
     -moz-transition: .25s ease-in-out; 
 
     -o-transition: .25s ease-in-out; 
 
     transition: .25s ease-in-out; 
 
    }

<nav class="navbar"> 
 
    <div class="logo"> 
 
      <a href="#"><img src="" alt='Logo'/></a> 
 
    </div> 
 
    <div id='tog' class="tog"> 
 
      <label for="toggle" id='nav-icon'> 
 
      <div class='icon-container'> 
 
       <span></span> 
 
       <span></span> 
 
       <span></span> 
 
      </div>        
 
      </label> 
 
    </div> 
 
</nav>

Answer 2

如果你對柔性沒有，你也可能會下降絕對positionning。

.navbar { 
 
    display: flex; 
 
    align-items: center;/* vertical-centering */ 
 
    color: #fff; 
 
    background-color: #df0024; 
 
    padding: 1% 0; 
 
    /* DEMO PURPOSE ONLY to show vertical centering */ 
 
    transition:0.25s; 
 
    height: 100px; 
 
    background-image:linear-gradient(to top, transparent 50%, rgba(255,255,255,0.15) 50%); 
 
} 
 
.navbar:hover {height:200px;} 
 
    /* end -- DEMO PURPOSE ONLY to show vertical centering */ 
 
nav a { 
 
/* demo purpose , useless about centering */ 
 
    margin: 0 0.5em; 
 
    color: white; 
 
} 
 

 

 

 
.tog { 
 
    cursor: pointer; 
 
    width: 1.5em; 
 
    margin-left: auto;/* goes all the way to the right side */ 
 
} 
 

 

 
/*This is the div that contain the burger 3 layers*/ 
 

 
#nav-icon { 
 
    display: block; 
 
    transform: rotate(0deg); 
 
    transition: .5s ease-in-out; 
 
    cursor: pointer; 
 
} 
 

 

 
/*The style of each of the burger icon 3 layers*/ 
 

 
#nav-icon span { 
 
    display: block; 
 
    background: white; 
 
    margin: 0.25em 0; 
 
    border-radius: 9px; 
 
    opacity: 1; 
 
    height: 0.25em; 
 
    transform: rotate(0deg); 
 
    transition: .25s ease-in-out; 
 
    box-shadow: 1px 1px 1px; 
 
}

<nav class="navbar"> 
 
    <div class="logo"> 
 
    <a href="#"><img src="" alt='Logo' /></a> 
 
    </div> 
 
    <a href="#">another link ? </a> 
 
    <div id='tog' class="tog"> 
 
    <label for="toggle" id='nav-icon'> 
 
    <div class='icon-container'> 
 
    \t <span></span> 
 
    \t <span></span> 
 
    \t <span></span> \t 
 
    \t </div> \t \t \t \t \t \t \t \t 
 
    </label> 
 
    </div> 
 
</nav>