Flex容器CSS：如何居中div元素？

我有以下的HTML/CSS代碼，我有一個問題將中心的內容在flex容器中。其結果是：Flex容器CSS：如何居中div元素？

ko result

在我心中，我想只是環動畫內的溫度後，中心柔性容器和中央的文字（溫度）和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>

來源

2017-07-24 thanaus

你不需要這麼多塊這裏。你需要絕對定位，因爲元素需要彼此堆疊。也爲中心絕對定位的元素，你需要這樣的風格

.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>

來源

2017-07-24 18:28:54

Flex容器CSS：如何居中div元素？

回答

相關問題