फ्लेक्सबॉक्स से हॉरिजॉन्टल और वर्टिकल सेंटर अलाइनमेंट के लिए, CSS3 में align-items प्रॉपर्टी का उपयोग करें। align-items प्रॉपर्टी को center पर सेट करें।
फ्लेक्सबॉक्स से हॉरिजॉन्टल और वर्टिकल सेंटर अलाइनमेंट का कोड निम्न है -
उदाहरण
<!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; } .h-container { display: flex; width: 300px; height: 300px; background-color: lightblue; justify-content: center; align-items: center; border: 2px solid black; } .h-1 { font-size: 30px; width: 150px; height: 150px; background-color: red; color: white; border: 2px solid rgb(58, 2, 83); } </style> </head> <body> <h2>Horizontal and vertical center alignment using flexbox</h2> <div class="h-container"> <div class="h-1">Centered Div</div> </div> </body> </html>आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
