如何在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'> <div class='icon-container'> <span></span> <span></span> <span></span> </div> </label> </div> </nav> 

如何居中#nav-icon span里面#nav-icon垂直？ 我想要的只是將漢堡圖標居中，因此我不需要更改包含漢堡圖標的其他元素樣式。

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

如果您對flex沒有任何要求，也可以放棄絕對定位。

 .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'> <span></span> <span></span> <span></span> </div> </label> </div> </nav>