CSS के साथ फ्लेक्स आइटम्स को कंटेनर के केंद्र में संरेखित करें

justify-content प्रॉपर्टी को center मान के साथ उपयोग करके फ्लेक्स आइटम्स को मुख्य अक्ष के साथ केंद्र में संरेखित किया जाता है। यह क्षैतिज केंद्र संरेखण के लिए सबसे आम तरीका है।

उदाहरण

<!DOCTYPE html> <html> 
  <head> 
    <style> 
      .mycontainer { 
        display: flex; 
        background-color: red; 
        justify-content: center; 
      } 
      .mycontainer > div { 
        background-color: #F1C40F; 
        text-align: center; 
        line-height: 60px; 
        font-size: 30px; 
        width: 100px; 
        margin: 5px; 
      } 
    </style> 
  </head> 
  <body> 
    <h1>क्विज़</h1> 
    <div class="mycontainer"> 
      <div>Q1</div> 
      <div>Q2</div> 
      <div>Q3</div> 
      <div>Q4</div> 
    </div> 
  </body> 
</html>

व्याख्या: फ्लेक्स कंटेनर में चार आइटम्स हैं। justify-content: center उन्हें मुख्य अक्ष (क्षैतिज) पर केंद्रित करता है। align-items (डिफ़ॉल्ट stretch) क्रॉस अक्ष पर संरेखण नियंत्रित करता है।