css - सभी ब्राउज़रों के लिए लंबवत रूप से एक div कैसे केंद्रित करें?




cross-browser vertical-alignment (20)

केवल लंबवत केंद्रित

यदि आपको इंटरनेट एक्सप्लोरर 6 और 7 की परवाह नहीं है, तो आप एक तकनीक का उपयोग कर सकते हैं जिसमें दो कंटेनर शामिल हैं।

बाहरी कंटेनर:

  • display: table; होना चाहिए display: table;

आंतरिक कंटेनर:

  • display: table-cell; होना चाहिए display: table-cell;
  • vertical-align: middle; होना चाहिए vertical-align: middle;

सामग्री बॉक्स:

  • display: inline-block; होना चाहिए display: inline-block;

आप अपनी चौड़ाई या ऊंचाई की देखभाल किए बिना सामग्री बॉक्स में इच्छित सामग्री जोड़ सकते हैं!

डेमो:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Malcolm in the Middle
     </div>
   </div>
</div>

यह पहेली भी देखें!

क्षैतिज और लंबवत केंद्रित

यदि आप दोनों क्षैतिज और लंबवत केंद्र बनाना चाहते हैं, तो आपको निम्न की भी आवश्यकता है।

आंतरिक कंटेनर:

  • text-align: center; होना चाहिए text-align: center;

सामग्री बॉक्स:

  • उदाहरण के लिए पाठ-संरेखण के लिए क्षैतिज पाठ-संरेखण को फिर से समायोजित करना चाहिए text-align: left; या text-align: right; , जब तक कि आप पाठ केंद्रित नहीं करना चाहते हैं

डेमो:

body {
    margin: 0;
}

.outer-container {
    position: absolute;
    display: table;
    width: 100%; /* This could be ANY width */
    height: 100%; /* This could be ANY height */
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding: 20px;
    border: 1px solid #000;
}
<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
         Malcolm in the Middle
     </div>
   </div>
</div>

यह पहेली भी देखें!

मैं सीएसएस के साथ लंबवत एक div केंद्र करना चाहता हूँ। मुझे टेबल या जावास्क्रिप्ट नहीं चाहिए, लेकिन केवल शुद्ध सीएसएस। मुझे कुछ समाधान मिले, लेकिन उनमें से सभी इंटरनेट एक्सप्लोरर 6 समर्थन गायब हैं।

<body>
    <div>Div to be aligned vertically</div>
</body>

मैं इंटरनेट एक्सप्लोरर 6 समेत सभी प्रमुख ब्राउज़रों में लंबवत रूप से एक div कैसे div कर सकता हूं?


फ्लेक्सबॉक्स समाधान

टिप्पणियाँ
1. मूल तत्व वर्ग का नाम दिया जाता है।
2. अपने समर्थित ब्राउज़र द्वारा आवश्यक होने पर फ्लेक्स विक्रेता उपसर्ग जोड़ें।

.verticallyCenter {
  display: flex;
  align-items: center;
}
<div class="verticallyCenter" style="height:200px; background:beige">
    <div>Element centered vertically</div>
</div>


अब फ्लेक्सबॉक्स समाधान आधुनिक ब्राउज़र के लिए एक बहुत ही आसान तरीका है, इसलिए मैं आपके लिए यह अनुशंसा करता हूं:

.container{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

body, html{
  height:100%;
}
<div class="container">
    <div>Div to be aligned vertically</div>
</div>


एक और मैं सूची में नहीं देख सकता:

.Center-Container {
  position: relative;
  height: 100%;
}

.Absolute-Center {
  width: 50%;
  height: 50%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  border: solid black;
}
  • क्रॉस-ब्राउजर (इंटरनेट एक्सप्लोरर 8 सहित - हैक के बिना इंटरनेट एक्सप्लोरर 10!)
  • प्रतिशत और न्यूनतम- / अधिकतम-
  • पैडिंग के बावजूद केंद्रित (बॉक्स आकार के बिना!)
  • height घोषित की जानी चाहिए ( चरणीय ऊंचाई देखें)
  • अनुशंसित सेटिंग overflow: auto सामग्री स्पिल्लोवर को रोकने के लिए overflow: auto (ओवरफ़्लो देखें)

स्रोत: सीएसएस में पूर्ण क्षैतिज और लंबवत केंद्र


खासकर माता-पिता divs के सापेक्ष (अज्ञात) ऊंचाई के साथ, अज्ञात समाधान में केंद्रित मेरे लिए बहुत अच्छा काम करता है। लेख में कुछ वाकई अच्छे कोड उदाहरण हैं।

यह क्रोम, फ़ायरफ़ॉक्स, ओपेरा, और इंटरनेट एक्सप्लोरर में परीक्षण किया गया था।

/* This parent can be any width and height */
.block {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.block:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */
}

/* The element to be centered, can
   also be of any width and height */ 
.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
<div style="width: 400px; height: 200px;">
   <div class="block" style="height: 90%; width: 100%">
  <div class="centered">
	 <h1>Some text</h1>
	 <p>Any other text..."</p>
  </div> 
   </div>
</div>


दरअसल आपको ऊर्ध्वाधर केंद्र के लिए दो div की आवश्यकता होती है। सामग्री युक्त div में चौड़ाई और ऊंचाई होना चाहिए।

#container {
  position: absolute;
  top: 50%;
  margin-top: -200px;
  /* half of #content height*/
  left: 0;
  width: 100%;
}

#content {
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  height: 395px;
  border: 1px solid #000000;
}
<div id="container">
  <div id="content">
    <h1>Centered div</h1>
  </div>
</div>

result यहाँ है


निम्न लिंक आपके सीएसएस में केवल 3 लाइनों के साथ ऐसा करने का एक आसान तरीका प्रस्तुत करता है:

लंबवत सीएसएस की केवल 3 लाइनों के साथ कुछ भी संरेखित करें

क्रेडिट्स : सेबेस्टियन Ekström

मुझे पता है कि सवाल पहले से ही एक जवाब है हालांकि मैंने अपनी सादगी के लिए लिंक में उपयोगिता देखी।


निम्नलिखित मेरे मामले में काम कर रहा है और फ़ायरफ़ॉक्स में परीक्षण किया गया था।

#element {
    display: block;
    transform: translateY(50%);
    -moz-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    -ms-transform: translateY(50%);
}

Div की ऊंचाई और माता-पिता की ऊंचाई गतिशील हैं। मैं इसका उपयोग करता हूं जब एक ही माता-पिता पर अन्य तत्व होते हैं जो लक्ष्य तत्व से अधिक होते हैं, जहां दोनों क्षैतिज रूप से इनलाइन स्थित होते हैं।


फ्लेक्सबॉक्स का उपयोग करके सामग्रियों को आसानी से केंद्रित किया जा सकता है। निम्न कोड कंटेनर के लिए सीएसएस दिखाता है जिसके अंदर सामग्री को केंद्रित करने की आवश्यकता है:

.absolute-center {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

बस इसे करें: कक्षा को अपने div पर जोड़ें:

.modal {
  margin: auto;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  height: 240px;
}

और एक स्पष्टीकरण के लिए इस लेख को पढ़ें। नोट: Height आवश्यक है।


बिलबाड का जवाब केवल .inner div की निश्चित चौड़ाई के साथ काम करता है। यह समाधान विशेषता text-align: center जोड़कर गतिशील चौड़ाई के लिए काम करता है text-align: center .outer div पर text-align: center

.outer {
  position: absolute;
  display: table;
  width: 100%;
  height: 100%;
  text-align: center;
}
.middle {
  display: table-cell;
  vertical-align: middle;
}
.inner {
  text-align: center;
  display: inline-block;
  width: auto;
}
<div class="outer">
  <div class="middle">
    <div class="inner">
      Content
    </div>
  </div>
</div>


ब्राउज़र संगतता के लिए उत्तर नहीं दे रहा है, लेकिन नए ग्रिड का उल्लेख करने के लिए और नई फ्लेक्सबॉक्स सुविधा नहीं है।

ग्रिड

से: मोज़िला - ग्रिड दस्तावेज़ीकरण - लंबवत रूप से div संरेखित करें

ब्राउज़र समर्थन: ग्रिड ब्राउज़र समर्थन

सीएसएस:

.wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
  grid-auto-rows: 200px;
  grid-template-areas: 
    ". a a ."
    ". a a .";
}
.item1 {
  grid-area: a;
  align-self: center;
  justify-self: center;
}

HTML:

<div class="wrapper">
 <div class="item1">Item 1</div>
</div>

flexbox

ब्राउज़र समर्थन: फ्लेक्सबॉक्स ब्राउज़र समर्थन

सीएसएस:

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;

मुझे लगता है कि फ्लेक्सबॉक्स का उपयोग किये बिना सभी ब्राउज़रों के लिए ठोस समाधान - "संरेखण-वस्तुएं: केंद्र;" प्रदर्शन का संयोजन है: तालिका और लंबवत-संरेखण: मध्य;

सीएसएस

.vertically-center
{
    display: table;

    width: 100%;  /* optional */
    height: 100%; /* optional */
}

.vertically-center > div
{
    display: table-cell;
    vertical-align: middle;
}

एचटीएमएल

<div class="vertically-center">
    <div>
        <div style="border: 1px solid black;">some text</div>
    </div>
</div>

‣demo: https://jsfiddle.net/6m640rpp/


मैं इसका इस्तेमाल करता हूँ। यह इंटरनेट एक्सप्लोरर 8 और बाद में काम करता है:

height:268px - display:table न्यूनतम ऊंचाई की तरह कार्य करती है।

सीएसएस:

* {
  padding: 0;
  margin: 0;
}
body {
  background: #cc9999;
}
p {
  background: #f0ad4e;
}
#all {
  margin: 200px auto;
}
.ff-valign-wrap {
  display: table;
  width: 100%;
  height: 268px;
  background: #ff00ff;
}
.ff-valign {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  background: #ffff00;
}

HTML:

<body>

  <div id="all">
    <div class="ff-valign-wrap">
      <div class="ff-valign">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet, animi autem doloribus earum expedita, ipsum laboriosam nostrum nulla officiis optio quam quis quod sunt tempora tenetur veritatis vero voluptatem voluptates?</p>
      </div>
    </div>
  </div>

</body>

मैंने इसके साथ किया (परिवर्तन चौड़ाई, ऊंचाई, मार्जिन-टॉप और मार्जिन-बाएं तदनुसार):

.wrapper {
    width:960px;
    height:590px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-295px;
    margin-left:-480px;
}

<div class="wrapper"> -- Content -- </div>

यदि आपके पास ब्लॉक तत्व है (उदाहरण के लिए) तो यह समाधान मेरे लिए काम करता है। मैंने समाधान को स्पष्ट बनाने के लिए रंगों का उपयोग किया।

HTML:

<main class="skin_orange">
<p>As you can the the element/box is vertically centered</p>
<div class="bigBox skin_blue">Blue Box</div>
</main>

सीएसएस:

main {
    position: relative;
    width: 400px;
    height: 400px;
}

.skin_orange {
    outline: thin dotted red;
    background: orange;
}

.bigBox {
    width: 150px;
    height: 150px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.skin_blue {
    background-color: blue;
}

जेएसफ़ील्ड कोड डेमो


यह हमेशा होता है जब मैं इस मुद्दे पर वापस आना चाहता हूं

उन लोगों के लिए जो कूदना नहीं चाहते हैं:

  1. अभिभावक कंटेनर को position:relative रूप में निर्दिष्ट करें position:relative या position:absolute
  2. बच्चे के कंटेनर पर एक निश्चित ऊंचाई निर्दिष्ट करें।
  3. सेट position:absolute और top:50% शीर्ष पर नीचे पैरेंट करने के लिए बच्चे के कंटेनर पर top:50%
  4. मार्जिन-टॉप सेट करें: -यह जहां आइटम कं ऑफसेट करने के लिए बच्चे कंटेनर की आधा ऊंचाई है।

कोड में इसका एक उदाहरण:

<style type="text/css">
    #myoutercontainer {position:relative}
    #myinnercontainer {position:absolute; top:50%; height:10em; margin-top:-5em}
</style>
...
<div id="myoutercontainer">
    <div id="myinnercontainer">
        <p>Hey look! I'm vertically centered!</p>
        <p>How sweet is this?!</p>
    </div>
</div>

लंबवत तत्व को flexbox करने का एक आधुनिक तरीका flexbox का उपयोग करना होगा।

ऊंचाई और बच्चे को केंद्र में तय करने के लिए आपको माता-पिता की आवश्यकता होती है।

नीचे दिया गया उदाहरण आपके ब्राउज़र के भीतर एक div को केंद्र में केंद्रित करेगा। महत्वपूर्ण क्या है (मेरे उदाहरण में) height: 100% निर्धारित करना है height: 100% body और html और फिर min-height: 100% आपके कंटेनर में min-height: 100%

body, html {
  background: #F5F5F5;
  box-sizing: border-box;
  height: 100%;
  margin: 0;
}

#center_container {
  align-items: center;
  display: flex;
  min-height: 100%;
}

#center {
  background: white;
  margin: 0 auto;
  padding: 10px;
  text-align: center;
  width: 200px;
}
<div id='center_container'>
  <div id='center'>I am center.</div>
</div>


सबसे आसान समाधान नीचे है:

.outer-div{
  width: 100%;
  height: 100%;
  display: flex;
}
.inner-div{
  margin: auto;
}

transform का उपयोग करके कोड की तीन पंक्तियां आधुनिक ब्राउज़र और इंटरनेट एक्सप्लोरर पर व्यावहारिक transform काम करती हैं:

.element{
     position: relative;
     top: 50%;
     transform: translateY(-50%);
     -moz-transform: translateY(-50%);
     -webkit-transform: translateY(-50%);
     -ms-transform: translateY(-50%);
}

मैं इस जवाब को जोड़ रहा हूं क्योंकि मुझे इस उत्तर के पिछले संस्करण में कुछ अपूर्णता मिली है (और स्टैक ओवरफ़्लो मुझे बस टिप्पणी करने की अनुमति नहीं देगा)।

  1. 'स्थिति' रिश्तेदार स्टाइल को गड़बड़ कर देता है अगर वर्तमान div शरीर में है और इसमें कोई कंटेनर div नहीं है। हालांकि 'फिक्स्ड' काम करता प्रतीत होता है, लेकिन यह स्पष्ट रूप से व्यूपोर्ट के केंद्र में सामग्री को ठीक करता है

  2. इसके अलावा मैंने कुछ स्टाइल divs को केंद्रित करने के लिए इस स्टाइल का उपयोग किया और पाया कि मोज़िला में इस रूपांतरित div के अंदर सभी तत्वों ने अपनी निचली सीमाओं को खो दिया था। संभवतः एक प्रतिपादन मुद्दा। लेकिन उनमें से कुछ को केवल न्यूनतम पैडिंग जोड़कर इसे सही ढंग से प्रस्तुत किया गया। क्रोम और इंटरनेट एक्सप्लोरर (आश्चर्यजनक रूप से) पैडिंग की आवश्यकता के बिना बक्से प्रदान किए







vertical-alignment