Flex Container CSS：如何居中div元素？

Question

我有以下HTML / CSS代碼，但在將內容居中放置在flex容器中時遇到了問題。 結果是：

在我的腦海中，我想將環放置在flex容器內，並將文本（溫度）和CSS動畫（箭頭）置於環動畫內的溫度之后。

這個怎么做？

 body { background-color: #0d74ff; } .container { padding: 20px; } .flexwrap { display: flex; flex-wrap: wrap; } .cell { position: relative; height: 200px; width: 200px; border: 1px solid rgba(0, 0, 0, 0.25); } .loader-ring { width: 150px; height: 150px; } .loader-ring-light { width: 150px; height: 150px; border-radius: 150px; box-shadow: 0 4px 0 #ffffff inset; animation: rotate-360 6s linear infinite; } .loader-text { font-weight: bold; font-size: 2em; } .scroll-down { border: 2px solid #fff; border-radius: 100px; width: 30px; height: 30px; } .scroll-down i { display: block; border-radius: 100px; transition: all 0.4s ease; width: 100%; height: 100%; background-size: 0 auto; animation: pulse 1.5s 0s infinite normal ease forwards; background-image: url("https://jamesmuspratt.com/codepen/img/arrow-down.svg"); background-repeat: no-repeat; } @keyframes rotate-360 { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes pulse { 0% { opacity: 0; background-position: center top; background-size: 0 auto; } 10% { opacity: 0; } 50% { opacity: 1; background-size: 75% auto; } 90% { opacity: 0; } 100% { opacity: 0; background-position: center bottom; background-size: 0 auto; } } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <div class="container"> <div class="flexwrap"> <div class="cell"> <div class='loader-ring'> <div class='loader-ring-light'></div> <div class='loader-ring-track'> <div class='loader-text'>26.6&deg;</div> <div class="scroll-down"><i></i></div> </div> </div> </div> </div> </div> 

Answer 1

您在這里不需要很多塊。 您需要絕對定位，因為元素將需要彼此堆疊。 另外，為了使絕對定位的元素居中，您需要這種樣式

.loader-ring,
.loader-ring-track {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

演示：

 body { background-color: #0d74ff; } .container { padding: 20px; } .cell { position: relative; height: 200px; width: 200px; border: 1px solid rgba(0, 0, 0, 0.25); } /* center absolutely positioned items */ /* both vertically and horizontally */ .loader-ring, .loader-ring-track { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .loader-ring-track { display: flex; /* new */ } .loader-ring { width: 150px; height: 150px; } .loader-ring-light { width: 150px; height: 150px; border-radius: 150px; box-shadow: 0 4px 0 #ffffff inset; animation: rotate-360 6s linear infinite; } .loader-text { font-weight: bold; font-size: 2em; } .scroll-down { border: 2px solid #fff; border-radius: 100px; width: 30px; height: 30px; } .scroll-down i { display: block; border-radius: 100px; transition: all 0.4s ease; width: 100%; height: 100%; background-size: 0 auto; animation: pulse 1.5s 0s infinite normal ease forwards; background-image: url("https://jamesmuspratt.com/codepen/img/arrow-down.svg"); background-repeat: no-repeat; } @keyframes rotate-360 { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes pulse { 0% { opacity: 0; background-position: center top; background-size: 0 auto; } 10% { opacity: 0; } 50% { opacity: 1; background-size: 75% auto; } 90% { opacity: 0; } 100% { opacity: 0; background-position: center bottom; background-size: 0 auto; } } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <div class="cell"> <div class='loader-ring'> <div class='loader-ring-light'></div> <div class='loader-ring-track'> <div class='loader-text'>26.6&deg;</div> <div class="scroll-down"><i></i></div> </div> </div> </div>