無法使用Flexbox將項目垂直居中

Question

我試圖按此處所述使用flexbox在水平和垂直方向上flexbox （ 單擊“水平和垂直兩者” =>然后單擊“您可以使用flexbox嗎？” ）

 .parent_test { display: flex; justify-content: center; align-items: center; } .sk-double-bounce { width: 40px; height: 40px; position: relative; } .sk-double-bounce .sk-child { width: 100%; height: 100%; border-radius: 20%; background-color: green; position: absolute; top: 0; left: 0; -webkit-animation: sk-doubleBounce 2s infinite ease-in-out; animation: sk-doubleBounce 2s infinite ease-in-out; } .sk-double-bounce .sk-double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes sk-doubleBounce { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes sk-doubleBounce { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } 

  <h1><a href="https://css-tricks.com/centering-css-complete-guide/#both-flexbox">centering-css-complete-guide/#both-flexbox</a> <div class="parent_test"> <div class="sk-double-bounce"> <div class="sk-child sk-double-bounce1"></div> <div class="sk-child sk-double-bounce2"></div> </div> </div> 

但是為什么它不垂直居中？ JSBin

Answer 1

您需要為父級指定height ，以使其垂直對齊。

 body { margin: 0 } .parent_test { display: flex; justify-content: center; align-items: center; height: 100vh } .sk-double-bounce { width: 40px; height: 40px; position: relative; } .sk-double-bounce .sk-child { width: 100%; height: 100%; border-radius: 20%; background-color: green; position: absolute; top: 0; left: 0; -webkit-animation: sk-doubleBounce 2s infinite ease-in-out; animation: sk-doubleBounce 2s infinite ease-in-out; } .sk-double-bounce .sk-double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } @-webkit-keyframes sk-doubleBounce { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes sk-doubleBounce { 0%, 100% { -webkit-transform: scale(0); transform: scale(0); } 50% { -webkit-transform: scale(1); transform: scale(1); } } 

 <div class="parent_test"> <div class="sk-double-bounce"> <div class="sk-child sk-double-bounce1"></div> <div class="sk-child sk-double-bounce2"></div> </div> </div> 

Answer 2

如果檢查輸出，您會看到.sk-double-bounce實際上位於.parent_test中心。 問題是.parent_test高度要.parent_test 。 （它只需要其內容加上填充和邊框值所需的高度）。

您現在可以理解@dippas解決方案為何起作用了。 如果需要，可以刪除.parent_test包裝器，在body放置flex規則，將body的高度設置為100vh ，然后將.sk-double-bounce div直接放置在主體中。 那將做同樣的工作。