如何在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>