it-swarm.dev

توسيط عموديًا div داخل div آخر

أريد توسيط div التي تتم إضافتها داخل div.

<div id="outerDiv">
    <div id="innerDiv">
    </div>
</div>

هذه هي CSS التي أستخدمها حاليًا.

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 50%;
        left:50%;
        margin-top: -147px;
        margin-left: -144px;
    }

كما ترون ، تعتمد الطريقة التي أستخدمها الآن على قيم العرض والارتفاع لـ innerDiv. إذا تغير العرض/الارتفاع ، فسيتعين علي تعديل قيمتي margin-top و margin-left.هل هناك أي حل عام يمكنني استخدامه لتوسيط innerDiv دائما بغض النظر عن حجمها؟

لقد اكتشفت أن استخدام margin:auto يمكن أن يعين أفقيًا داخليًا على الوسط. لكن ماذا عن الوسط الرأسي المخصص؟

496
user700284

tl؛ dr

محاذاة رأسية للأعمال المتوسطة ، ولكن سيتعين عليك استخدام table-cell على العنصر الأصل و inline-block على الطفل.

لن يعمل هذا الحل في IE6 و 7.
لك هي الطريقة الأكثر أمانًا للذهاب لهؤلاء.
ولكن نظرًا لأنك وضعت علامة على سؤالك باستخدام CSS3 و HTML5 ، كنت أفكر في أنك لا تمانع في استخدام حل حديث.

الحل الكلاسيكي (تخطيط الجدول)

كان هذا جوابي الأصلي. لا يزال يعمل بشكل جيد وهو الحل مع أوسع دعم. تخطيط الجدول سوف يؤثر على أداء العرض الخاص بك لذلك أقترح عليك استخدام أحد الحلول الحديثة.

هنا مثال


تم اختباره في:

  • FF3.5 +
  • FF4 +
  • Safari 5+
  • Chrome 11+
  • IE9 +

HTML

<div class="cn"><div class="inner">your content</div></div>

CSS

.cn {
  display: table-cell;
  width: 500px;
  height: 500px;
  vertical-align: middle;
  text-align: center;
}

.inner {
  display: inline-block;
  width: 200px; height: 200px;
}

الحل الحديث (تحويل)

نظرًا لأن التحويلات مدعومة جيدًا إلى حد ما الآن هناك طريقة أسهل للقيام بذلك.

CSS

.cn {
  position: relative;
  width: 500px;
  height: 500px;
}

.inner {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
  height: 200px;
}

تجريبي


♥ الحل الحديث المفضل لدي (flexbox)

لقد بدأت في استخدام flexbox أكثر فأكثر كما أنها مدعومة جيدًا الآن إنها أسهل طريقة.

CSS

.cn {
  display: flex;
  justify-content: center;
  align-items: center; 
}

تجريبي

المزيد من الأمثلة والاحتمالات: قارن كل الطرق في صفحة واحدة

695
meo

هناك طريقة أخرى لتحقيق هذا التمركز الأفقي والرأسي:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

( مرجع )

111
user700284

محاذاة عمودية أي شيء مع 3 خطوط فقط من CSS

HTML

<div class="parent-of-element">

    <div class="element">
        <p>Hello</p>
    </div>

</div>

أبسط

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

CSS

.parent-of-element {
   position: relative;
   height: 500px;
   /* or height: 73.61% */
   /* or height: 35vh */
   /* or height: ANY HEIGHT */
}

.element {
  position: absolute;
  top: 50%;

  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

وفقًا لـ shouldiprefix هذه هي البادئات الوحيدة التي تحتاج إليها

يمكنك أيضًا استخدام٪ كقيمة لخاصية 'الارتفاع' الخاصة بـ .parent-of-element ، طالما أن أصل العنصر لديه ارتفاع أو بعض المحتوى الذي يوسع حجمه العمودي.

40
drjorgepolanco

بدلاً من ربط نفسي بالعقدة باستخدام CSS الصعب الكتابة والتي يصعب الحفاظ عليها (والتي تحتاج أيضًا إلى التحقق من صحة المتصفح المتقلب!) أجد أنه من الأفضل بكثير التخلي عن CSS واستخدام HTML 1.0 البسيط بشكل رائع:

<table id="outerDiv" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td valign="middle" id="innerDiv">
        </td>
    </tr>
</table>

يحقق ذلك كل ما يريده الملصق الأصلي ، وهو قوي ويمكن صيانته.

16
Iron Pillow

أنا شخصياً أفضل خدعة استخدام عنصر زائف خفي لتمتد على ارتفاع الحاوية الخارجية بالكامل ، ومواءمتها رأسياً مع المحتوى الآخر. كريس كويير لديه مقال لطيف عن هذه التقنية. http://css-tricks.com/centering-in-the-unknown/ الميزة الضخمة لهذا هو قابلية التوسع. لست بحاجة إلى معرفة ارتفاع المحتوى أو القلق بشأن نمو/انكماش. هذا الحل جداول :).

وإليك كمان مع كل CSS ستحتاج ومثال عملي. http://jsfiddle.net/m5sLze0d/

.center:before {
    content: ""; /* Adding Extra Space Above Element */
    display: inline-block;
    height: 100%;
    margin-right: -0.3em;
    vertical-align: middle;
}
.center_element {
    display:inline-block;
    float:none;
    vertical-align:middle;
    white-space:normal;
    text-align:left;
}
5
Harry Robbins
#outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        background:grey;
        display:flex;
        justify-content:center;
        align-items:center;
    }

    #innerDiv{
    background:cyan;
        width: 284px;
        height: 290px;

        
    }
<div id="outerDiv">
<div id="innerDiv">Inner Div
</div>
</div>

يمكنك القيام بذلك ببساطة عن طريق إضافة نمط المغلق المذكور أعلاه. أتمنى لك كل خير. للاستعلام اكتب تعليق

4
Nishant Singh

عندما يكون height غير مضبوط (تلقائي) ؛ يمكنك إعطاء div الداخلي بعض الحشوة (العلوية والسفلية) لجعلها مركزية رأسياً:

<div>
    <div style="padding-top:20px;padding-bottom:20px">
    <!--content-->
    </div>
</div>
3
Majid

تركز عناصر div عموديًا داخل div

فقط قم بتعيين الحاوية على display:table ثم العناصر الداخلية على display:table-cell. اضبط height على الحاوية ، ثم اضبط vertical-align:middle على العناصر الداخلية. هذا لديه توافق واسع مرة أخرى بقدر أيام IE9.

لاحظ فقط أن المحاذاة العمودية ستعتمد على ارتفاع الحاوية الأصلية.

.cn
{
display:table;
height:80px;
background-color:#555;
}

.inner
{
display:table-cell;
vertical-align:middle;
color:#FFF;
padding-left:10px;
padding-right:10px;
}
<div class="cn">
  <div class="inner">Item 1</div>
  <div class="inner">Item 2</div>
</div>
3
Volomike

أدخل وصف الصورة هنا 100 ٪ يعمل

.div1{
  height: 300px;
  background: red;
  width: 100%;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}
.div2{
  background: green;
  height: 100px;
  width: 100%;
}

    <div class="div1">
      <div class="div2">
      sdfd
      </div>
    </div>

https://jsfiddle.net/Mangesh1556/btn1mozd/4/

2
Mangesh Jadhav

رابط الكمان < http://jsfiddle.net/dGHFV/2515/ >

جرب هذا

   #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid red;
    }

    #innerDiv{
        width: 284px;
        height: 290px;
        position:absolute;
        top: 0px;
        left:0px;
        right:0px;
        bottom:0px;
        margin:auto;
        border:1px solid green;
    }
2
Friend

هذا يعمل لي. يمكن تحديد عرض وارتفاع div الخارجي.

هنا الرمز:

.outer {
  position: relative;
  text-align: center;
  width: 100%;
  height: 150px; // Any height is allowed, also in %.
  background: gray;
}

.outer > div:first-child {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: red;
}
<div class="outer">
  <div class="inner">
    Put here your text or div content!
  </div>
</div>
2
phlegx

أنا أستخدم الحل التالي منذ أكثر من عام ، وهو يعمل مع IE 7 و 8 أيضًا.

<style>
.outer {
    font-size: 0;
    width: 400px;
    height: 400px;
    background: orange;
    text-align: center;
    display: inline-block;
}

.outer .emptyDiv {
    height: 100%;
    background: orange;
    visibility: collapse;
}

.outer .inner {
    padding: 10px;
    background: red;
    font: bold 12px Arial;
}

.verticalCenter {
    display: inline-block;
    *display: inline;
    zoom: 1;
    vertical-align: middle;
}
</style>

<div class="outer">
    <div class="emptyDiv verticalCenter"></div>
    <div class="inner verticalCenter">
        <p>Line 1</p>
        <p>Line 2</p>
    </div>
</div>
2
Arsh

إذا كنت لا تزال غير مفهومة بعد قراءة الإجابات الرائعة المذكورة أعلاه.

فيما يلي مثالان بسيطان لكيفية تحقيق ذلك.

عن طريق العرض: خلية الجدول

.wrapper {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  display: inline-block;
  text-align: left;
  padding: 20px;
  border: 1px solid #cd0000;
}
<div class="wrapper">
  <div class="container">
    Center align a div using "<strong>display: table-cell</strong>"
  </div>
</div>

استخدام الصندوق المرن (العرض: المرن)

.wrapper {
  display: flex;
  justify-content: center;
  width: 400px;
  height: 300px;
  border: 1px solid #555;
}

.container {
  align-self: center;
  padding: 20px;
  border: 1px solid #cd0000;
}
<div class="wrapper">
    <div class="container">
        Centering a div using "<strong>display: flex</strong>"
    </div>
</div>

ملاحظة: تحقق من توافق متصفح الشاشة: خلية الجدول والمرنة قبل استخدام التطبيقات المذكورة أعلاه.

2
shivamsupr

أرغب في عرض طريقة مستعرض آخر يمكنها حل هذه المشكلة باستخدام CSS3 calc().
يمكننا استخدام الدالة calc() للتحكم في خاصية margin-top الخاصة بـ div التابعة عندما يتم وضعها مطلقة بالنسبة إلى div الأصل.


الميزة الرئيسية باستخدام calc() هي أنه يمكن تغيير ارتفاع العنصر الأصل في أي وقت وسيتم دائمًا محاذاة div التابع إلى الوسط.
يتم حساب margin-top بشكل ديناميكي (بواسطة css وليس بواسطة برنامج نصي وهو كبير جدًا ميزة ).

تحقق من هذا عرض توضيحي مباشر

<!DOCTYPE html>
<html>
  <head>
    <style>
      #parent{
        background-color:blue;
        width: 500px;
        height: 500px;
        position:relative;
      }
      #child{
        background-color:red;
        width: 284px;
        height: 250px;
        position:absolute;
        /* the middle of the parent(50%) minus half of the child (125px) will allways            center vertically the child inside the parent */
        margin-top: -moz-calc(50% - 125px);
        /* WebKit */
        margin-top: -webkit-calc(50% - 125px);
        /* Opera */
        margin-top: -o-calc(50% - 125px);
        /* Standard */
        margin-top: calc(50% - 125px);
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <div id="child">
      </div>
    </div>
  </body>
</html>

الإخراج:

 enter image description here

1
jonathana

محاولة محاذاة العنصر الداخلي مثل هذا:

top: 0;
bottom: 0;
margin: auto;
display: table;

وبالطبع:

position: absolute;
1
VonAxt

يمكنك توسيط div رأسياً وأفقياً في CSS باستخدام flex ؛

#outerDiv{
width: 500px;
    height: 500px;
    position:relative;
    border:1px solid #000;
    margin:0 auto;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;

    }

#innerDiv{
    width: 284px;
    height: 290px;
    border:1px solid #eee;

}

والثاني هو على النحو التالي ؛

    #outerDiv{
        width: 500px;
        height: 500px;
        position:relative;
        border:1px solid #000;
        }

        #innerDiv{
        max-width: 300px;
        height: 200px;
        background-color: blue;
        position:absolute; 
        left:0;
        right:0;
        top:0;
        bottom:0;
        margin:auto;
        border:1px solid #000;
        border-radius:4px;
    }

و HTML الناتجة:

    <div id="outerDiv">
        <div id="innerDiv"></div>
    </div>
1
Tariq Javed

يمكنك القيام بذلك مع كتلة javascript (jQuery) بسيطة.

CSS:

#outerDiv{
    height:100%;
}

Javascript :

<script type="text/javascript">
    $(document).ready(function () {
        $("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2);
    });
</script>
1
Ghanesh MV

هذا سيعود الطريق إلى IE6!

<!DOCTYPE html> مطلوب على IE6 أيضًا! [سوف يجبر IE6 الوضع الصارم الافتراضي كذلك].

(بالطبع ، التلوين المربع هو لأغراض العرض فقط)

    #outer{
        width: 205px;
        height: 205px;
        margin: auto; 
        text-align: center;
    }
    #inner{
        text-align: left;
        vertical-align: middle;
        width: 120px;
        height: 120px;
        display: inline-block;
   
    }
    #center{
        height: 100%; width:0px;
        vertical-align: middle;
        display: inline-block;
    }
    div {background: rgba(0,128,255,.6)}
<div id=outer>
    <div id=center></div><div id=inner> The inner DIV
    </div>
</div>
1
Bekim Bacaj

بالنسبة لـ innerdiv التي لا تحدد قيمة الارتفاع الخاصة بها ، لا يوجد حل css خالص لجعله مركزًا عموديًا. يمكن أن يكون حل جافا سكريبت هو الحصول على offsetHeight من innerdiv ، ثم حساب style.marginTop.

1
james li

نص محاذاة النص على العنصر الأصل ، وعرض كتلة مضمنة على العنصر الفرعي. هذا سوف مركز كل شيء أكثر من أي شيء. وأعتقد أن دعوتها "كتلة تعويم".

<div class="outer">
 <div class="inner"> some content </div>
</div><!-- end outer -->

<style>
div.outer{
 width: 100%;
 text-align: center;
}
div.inner{
 display: inline-block;
 text-align: left
}
</style>

هذا هو أيضا بديل جيد لطفا ، حظا سعيدا!

0
user3943543

توسيط عموديًا div داخل div آخر

#outerDiv{
  width: 500px;
  height: 500px;
  position:relative;
  
  background-color: lightgrey;  
}

#innerDiv{
  width: 284px;
  height: 290px;
  
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%); /* IE 9 */
  -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ 
  
  background-color: grey;
}
<div id="outerDiv">
  <div id="innerDiv"></div>
</div>
0
antelove

لتوسيط المحاذاة رأسياً وأفقياً:

#parentDiv{
    display:table;
    text-align:center;
}

#child {
     display:table-cell;
     vertical-align:middle;
}
0
Bhimashankar Sutar