CSS
कार्यक्षेत्र केंद्रित
खोज…
टिप्पणियों
इसका उपयोग तब किया जाता है जब तत्व के आयाम ( width
और height
) ज्ञात या गतिशील नहीं होते हैं।
अन्य सभी विकल्पों पर फ्लेक्सबॉक्स का उपयोग करना पसंद करें क्योंकि यह यूजर इंटरफेस डिजाइन के लिए अनुकूलित है।
प्रदर्शन के साथ केंद्रित: तालिका
HTML:
<div class="wrapper">
<div class="outer">
<div class="inner">
centered
</div>
</div>
</div>
सीएसएस:
.wrapper {
height: 600px;
text-align: center;
}
.outer {
display: table;
height: 100%;
width: 100%;
}
.outer .inner {
display: table-cell;
text-align: center;
vertical-align: middle;
}
ट्रांसफॉर्मेशन के साथ केंद्रित
HTML:
<div class="wrapper">
<div class="centered">
centered
</div>
</div>
सीएसएस:
.wrapper {
position: relative;
height: 600px;
}
.centered {
position: absolute;
z-index: 999;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
Flexbox के साथ केंद्रित
HTML:
<div class="container">
<div class="child"></div>
</div>
सीएसएस:
.container {
height: 500px;
width: 500px;
display: flex; // Use Flexbox
align-items: center; // This centers children vertically in the parent.
justify-content: center; // This centers children horizontally.
background: white;
}
.child {
width: 100px;
height: 100px;
background: blue;
}
लाइन ऊंचाई के साथ केंद्रित पाठ
HTML:
<div class="container">
<span>vertically centered</span>
</div>
सीएसएस:
.container{
height: 50px; /* set height */
line-height: 50px; /* set line-height equal to the height */
vertical-align: middle; /* works without this rule, but it is good having it explicitly set */
}
नोट: यह विधि केवल पाठ की एक पंक्ति को लंबवत केंद्र में रखेगी । यह ब्लॉक तत्वों को सही ढंग से केंद्र में नहीं रखेगा और यदि पाठ एक नई पंक्ति पर टूटता है, तो आपके पास पाठ की दो बहुत लंबी लाइनें होंगी।
स्थिति के साथ केंद्रित: निरपेक्ष
HTML:
<div class="wrapper">
<img src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>
सीएसएस:
.wrapper{
position:relative;
height: 600px;
}
.wrapper img {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
यदि आप अन्य छवियों को केंद्र में रखना चाहते हैं, तो आपको उस तत्व को ऊंचाई और चौड़ाई देनी होगी।
HTML:
<div class="wrapper">
<div class="child">
make me center
</div>
</div>
सीएसएस:
.wrapper{
position:relative;
height: 600px;
}
.wrapper .child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 200px;
height: 30px;
border: 1px solid #f00;
}
छद्म तत्व के साथ केंद्रित
HTML:
<div class="wrapper">
<div class="content"></div>
</div>
सीएसएस:
.wrapper{
min-height: 600px;
}
.wrapper:before{
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.content {
display: inline-block;
height: 80px;
vertical-align: middle;
}
यह विधि उन मामलों में सबसे अच्छी तरह से उपयोग की जाती है, जहां आपके पास एक विविध-ऊंचाई है। .content
अंदर .wrapper
केंद्रित है; और आप चाहते हैं .wrapper
'का विस्तार करने के लिए जब रों ऊंचाई .content
की ऊंचाई से अधिक .wrapper
की न्यूनतम ऊंचाई।