कैसे करें - केंद्र तत्वों को लंबवत
CSS के साथ किसी तत्व को लंबवत और क्षैतिज रूप से केन्द्रित करना सीखें।
मैं लंबवत और क्षैतिज रूप से केंद्रित हूं।
किसी भी चीज़ को लंबवत रूप से कैसे केन्द्रित करें
उदाहरण
<style>
.container {
height: 200px;
position:
relative;
border: 3px solid green;
}
.vertical-center {
margin: 0;
position: absolute;
top: 50%;
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
</style>
<div
class="container">
<div class="vertical-center">
<p>I am vertically centered.</p>
</div>
</div>
लंबवत और क्षैतिज रूप से केंद्र कैसे करें
उदाहरण
<style>
.container {
height: 200px;
position:
relative;
border: 3px solid green;
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform:
translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
<div
class="container">
<div class="center">
<p>I am vertically and horizontally centered.</p>
</div>
</div>
आप चीजों को केंद्र में रखने के लिए फ्लेक्सबॉक्स का भी उपयोग कर सकते हैं:
उदाहरण
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid
green;
}
युक्ति: तत्वों को संरेखित करने के बारे में अधिक जानने के लिए हमारे सीएसएस संरेखण ट्यूटोरियल पर जाएं।
युक्ति: तत्वों को स्केल करने के तरीके के बारे में अधिक जानने के लिए हमारे CSS ट्रांसफ़ॉर्म ट्यूटोरियल पर जाएँ।
युक्ति: अधिक फ्लेक्सबॉक्स जानने के लिए हमारे सीएसएस फ्लेक्सबॉक्स ट्यूटोरियल पर जाएं।