it-swarm.asia

كيفية توسيط أفقيا <div>؟

كيف يمكنني وضع رمز <div> أفقياً ضمن <div> آخر باستخدام CSS؟

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>
3946
Lukas

يمكنك تطبيق هذا CSS على <div> الداخلي:

#inner {
  width: 50%;
  margin: 0 auto;
}

بالطبع ، لست مضطرًا إلى ضبط width على 50%. سيعمل أي عرض أقل من <div> المحتوي. margin: 0 auto هو ما يفعله التمركز الفعلي.

إذا كنت تستهدف IE8 + ، فقد يكون من الأفضل الحصول على هذا بدلاً من ذلك:

#inner {
  display: table;
  margin: 0 auto;
}

ستجعل مركز العنصر الداخلي أفقيًا ويعمل دون تحديد width.

مثال العمل هنا:

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>
4390
Justin Poliey

إذا كنت لا تريد تعيين عرض ثابت على div ، فيمكنك فعل شيء مثل هذا:

#outer {
  width: 100%;
  text-align: center;
}

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

يجعل هذا div داخل عنصر مضمّن يمكن توسيطه مع text-align.

1178
Alfred

أفضل الطرق هي مع CSS 3 .

نموذج مربع:

#outer {
  width: 100%;
  /* Firefox */
  display: -moz-box;
  -moz-box-pack: center;
  -moz-box-align: center;
  /* Safari and Chrome */
  display: -webkit-box;
  -webkit-box-pack: center;
  -webkit-box-align: center;
  /* W3C */
  display: box;
  box-pack: center;
  box-align: center;
}

#inner {
  width: 50%;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

وفقًا لسهولة الاستخدام ، يمكنك أيضًا استخدام خصائص box-orient, box-flex, box-direction.

Flex :

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

اقرأ المزيد حول توسيط العناصر الفرعية

و هذا ما يفسر لماذا نموذج الصندوق هو أفضل نهج :

340
Konga Raju

افترض أن div الخاصة بك واسعة 200px:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

تأكد من أن العنصر الأصل وضعه أي قريب أو ثابت أو مطلق أو لزج.

إذا كنت لا تعرف عرض div الخاص بك ، يمكنك استخدام transform:translateX(-50%); بدلاً من الهامش السلبي.

https://jsfiddle.net/gjvfxxdj/

233
nuno_cruz

لقد قمت بإنشاء هذا المثال لإظهار كيفية رأسياً و أفقياً align.

الكود هو في الأساس هذا:

#outer {
  position: relative;
}

و...

#inner {
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
} 

وسيبقى في center حتى عندما تكون تعيد الحجم شاشتك.

212
Tom Maton

ذكرت بعض الملصقات طريقة CSS 3 للتوسيط باستخدام display:box.

بناء الجملة هذا قديم ولا يجب استخدامه بعد الآن. [انظر أيضا هذا المنصب] .

لذلك فقط من أجل الاكتمال هنا هي أحدث طريقة للتوسيط في CSS 3 باستخدامFlexible Box Layout Module.

إذا كان لديك علامة بسيطة مثل:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... وتريد توسيط عناصرك داخل المربع ، إليك ما تحتاجه في العنصر الأصل (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}
.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}
<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

إذا كنت بحاجة إلى دعم المتصفحات القديمة التي تستخدم بناء الجملة الأقدم لـ flexbox إليك مكان جيد للبحث.

181
Danield

إذا كنت لا تريد تعيين عرض ثابت ولا تريد الهامش الإضافي ، فأضف display: inline-block إلى العنصر الخاص بك.

يمكنك استخدام:

#element {
    display: table;
    margin: 0 auto;
}
128
Salman Abbas

توسيط div من الطول والعرض غير معروف

أفقيا وعموديا. يعمل مع المتصفحات الحديثة بشكل معقول (Firefox ، Safari/WebKit ، Chrome ، Internet Explorer 10 ، Opera ، إلخ)

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>

العبث معها أكثر على Codepen أو على JSBin .

83
iamnotsam

خاصية محاذاة مربع CSS3

#outer {
    width:100%;
    height:100%;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}
81
neoneye

لا يمكن توسيطها إذا لم تعطها عرضًا ، وإلا فسوف يستغرقها ، كل المساحة الأفقية الافتراضية.

81
gizmo

اضبط width واضبط margin-left و margin-right على auto. هذا للأفقي فقط ، رغم ذلك. إذا كنت تريد كلا الاتجاهين ، فستفعل ذلك بالطريقتين. لا تخف من التجربة ؛ انها ليست كما لو كنت كسر أي شيء.

79
Sneakyness

اضطررت مؤخرًا إلى توسيط div "مخفي" (على سبيل المثال ، عرض: لا شيء ؛) يحتوي على نموذج تم عرضه بداخله ويتعين توسيطه على الصفحة. كتبت jQuery التالي لعرض div المخفي ثم تحديث CSS إلى العرض التلقائي الذي تم إنشاؤه في الجدول وتغيير الهامش لتوسيطه. (يتم تشغيل تبديل العرض بالنقر فوق ارتباط ، ولكن هذا الرمز لم يكن ضروريًا لعرضه.)

ملاحظة: أنا أشارك هذا الرمز لأن Google أحضرتني إلى حل Stack Overflow وأن كل شيء كان سيعمل فيما عدا أن العناصر المخفية ليس لها أي عرض ولا يمكن تغيير حجمها/توسيطها حتى بعد عرضها.

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>
56
James Moberg

الطريقة التي أفعلها عادة هي استخدام الموضع المطلق:

#inner{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
}

لا يحتاج div الخارجي إلى أي ميزات إضافية حتى يعمل هذا.

51
william44isme

بالنسبة إلى Firefox و Chrome:

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

لمتصفح Internet Explorer و Firefox و Chrome:

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

تعتبر خاصية text-align: اختيارية للمتصفحات الحديثة ، ولكنها ضرورية في وضع Internet Explorer Quirks لدعم المتصفحات القديمة.

49
ch2o

هذا هو جوابي.

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>
44
Ankit Jain

حل آخر لهذا دون الحاجة إلى تعيين عرض لأحد العناصر هو استخدام السمة CSS 3 transform.

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

الحيلة هي أن translateX(-50%) تعيّن عنصر #inner بنسبة 50 بالمائة على يسار عرضه الخاص. يمكنك استخدام نفس الخدعة للمحاذاة العمودية.

إليك Fiddle إظهار المحاذاة الأفقية والرأسية.

مزيد من المعلومات على Mozilla Developer Network .

40
Kilian Stinson

كريس كويير الذي كتب وظيفة ممتازة حول "التمركز في المجهول" على مدونته. انها جولة في حلول متعددة. لقد نشرت واحدة لم يتم نشرها في هذا السؤال. يحتوي على مزيد من دعم المستعرض ثم الحل فليكس بوكس ​​، وأنت لا تستخدم display: table; التي يمكن أن كسر الأشياء الأخرى.

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

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width:0;
  overflow:hidden;
}

/* The element to be centered, can
   also be of any width and height */ 
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
39
Willem de Wit

أدركت أنني متأخرة جدًا في اللعبة ، لكن هذا سؤال شائع للغاية ، وقد وجدت مؤخرًا مقاربة لم أرها مذكورة في أي مكان هنا ، لذلك اعتقدت أنني وثقتها.

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

تحرير: يجب أن يكون كلا العنصرين بنفس العرض حتى يعمل بشكل صحيح.

34
BenjaminRH

على سبيل المثال ، راجع هذا الرابط والمقتطف أدناه:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

إذا كان لديك الكثير من الأطفال تحت أحد الوالدين ، لذلك يجب أن يكون محتوى CSS الخاص بك مثل هذا مثال على fiddle .

يشبه محتوى HTML هذا:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

ثم انظر مثال على الكمان .

29
Lalit Kumar

توسيط أفقيا فقط

في تجربتي ، فإن أفضل طريقة لتوسيط مربع أفقيًا هي تطبيق الخصائص التالية:

الحاوية:

  • يجب أن يكون text-align: center;

مربع المحتوى:

  • يجب أن يكون display: inline-block;

عرض:

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

راجع أيضًا هذا Fiddle !


تركز كل من أفقيا وعموديا

في تجربتي ، أفضل طريقة لتوسيط صندوق كلاهما رأسياً وأفقياً هي استخدام حاوية إضافية وتطبيق الخصائص التالية:

الحاوية الخارجية:

  • يجب أن يكون display: table;

الحاوية الداخلية:

  • يجب أن يكون display: table-cell;
  • يجب أن يكون vertical-align: middle;
  • يجب أن يكون text-align: center;

مربع المحتوى:

  • يجب أن يكون display: inline-block;

عرض:

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

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

.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">
      Center this!
    </div>
  </div>
</div>

راجع أيضًا هذا Fiddle !

26
John Slegers

أسهل طريقة:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}
<div id="outer">
  <div id="inner">Blabla</div>
</div>
25
joan16v

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

  • .outer - العرض الكامل
  • .inner - لا توجد مجموعة عرض (ولكن يمكن تحديد الحد الأقصى للعرض)

افترض أن العرض المحسوب للعناصر هما 1000 بكسل و 300 بكسل على التوالي. استكمل كما يلي:

  1. التفاف .inner بداخل .center-helper
  2. جعل .center-helper كتلة مضمّنة ؛ يصبح بنفس حجم .inner مما يجعله بعرض 300 بكسل.
  3. ادفع .center-helper بنسبة 50٪ إلى اليمين بالنسبة إلى الأصل ؛ هذا يضع يساره في 500px wrt. الخارجي.
  4. ادفع .inner 50٪ لليسار بالنسبة إلى الأصل ؛ هذا يضع اليسار في -150px wrt. مساعد الوسط وهو ما يعني أن يسارها يتراوح بين 500 - 150 = 350 بكسل. الخارجي.
  5. قم بتعيين تجاوز السعة على .outer لإخفائه لمنع شريط التمرير الأفقي.

عرض:

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}
<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>
.outer {
    overflow: hidden;
}
.center-helper {
    float: left;
    position: relative;
    left: 50%;
}
.inner {
    float: left;
    position: relative;
    left: -50%;
}
24
Salman A

هنا هو ما تريد في أقصر الطرق.

JSFIDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}
23
caniz

يمكنك أن تفعل شيئا مثل هذا

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

سيؤدي هذا أيضًا إلى محاذاة #inner رأسيًا. إذا كنت لا ترغب في ذلك ، فقم بإزالة خصائص display و vertical-align ؛

23
Kenneth Palaganas

محاذاة النص: المركز

تطبيق text-align: center تتمركز المحتويات المضمنة داخل مربع الخط. ومع ذلك ، نظرًا لأن div الداخلي يحتوي على width: 100% افتراضيًا ، فيتعين عليك تعيين عرض معين أو استخدام أي مما يلي:

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

الهامش: 0 السيارات

يعد استخدام margin: 0 auto خيارًا آخر وهو أكثر ملاءمة للتوافق مع المتصفحات الأقدم. يعمل مع display: table .

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

حول flexbox

display: flex يتصرف مثل عنصر كتلة ويضع محتواه وفقًا لطراز flexbox. يعمل مع justify-content: center .

يرجى ملاحظة: Flexbox متوافق مع معظم المتصفحات ولكن ليس كلها. انظر هنا للحصول على قائمة كاملة ومحدثة من التوافق المتصفحات.

#inner {
  display: inline-block;
}

#outer {
  display: flex;
  justify-content: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

تحول

transform: translate يتيح لك تعديل مساحة الإحداثيات لنموذج التنسيق المرئي CSS. باستخدامه ، يمكن ترجمة العناصر وتدويرها وتحجيمها وانحرافها. للتوسيط أفقيًا يتطلب position: absolute و left: 50% .

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

<center> (مهملة)

العلامة <center> هي بديل HTML إلى text-align: center . إنه يعمل على المتصفحات الأقدم ومعظم المستعرضات الجديدة لكنه لا يعتبر ممارسة جيدة لأن هذه الميزة قديمة وتمت إزالتها من معايير الويب.

#inner {
  display: inline-block;
}
<div id="outer">
  <center>
    <div id="inner">Foo foo</div>
  </center>
</div>
21
Paolo Forgia

يمكنك استخدام display: flex لقسم div الخارجي وللمركز أفقيا لديك لإضافة justify-content: center

#outer{
    display: flex;
    justify-content: center;
}

أو يمكنك زيارة w3schools - CSS flex Property لمزيد من الأفكار.

21
Milan Panigrahi

حسنًا ، لقد تمكنت من العثور على حل ربما يناسب جميع المواقف ، ولكن باستخدام JavaScript:

وهنا الهيكل:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

وإليك مقتطف JavaScript:

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

إذا كنت ترغب في استخدامه في أسلوب استجابة ، يمكنك إضافة ما يلي:

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});
20
Miguel Leite

يتمتع Flex بأكثر من 97٪ من تغطية دعم المستعرض وقد يكون أفضل طريقة لحل هذا النوع من المشاكل في بضعة أسطر:

#outer {
  display: flex;
  justify-content: center;
}
20
Sandesh Damkondwar

تعمل هذه الطريقة أيضًا على ما يرام:

div.container {
   display: flex;
   justify-content: center; /* for horizontal alignment */
   align-items: center;     /* for vertical alignment   */
}

بالنسبة إلى الرمز الداخلي <div> ، الشرط الوحيد هو أن يكون height و width أكبر من الحاوية الخاصة به.

20
Billal Begueradj

يوجد خيار واحد وجدته:

الجميع يقول لاستخدام:

margin: auto 0;

ولكن هناك خيار آخر. عيّن هذه الخاصية للقيم الأم. يعمل تماما في أي وقت:

text-align: center;

وانظر ، يذهب الطفل المركز.

وأخيرا CSS لك:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}
19
Pnsadeghy

إذا كان أي شخص يرغب في حل jQuery لـ center ، فعليك بمحاذاة divs:

$(window).bind("load", function() {
    var wwidth = $("#outer").width();
    var width = $('#inner').width();
    $('#inner').attr("style", "padding-left: " + wwidth / 2 + "px; margin-left: -" + width / 2 + "px;");
});
19
sarath

جرب اللعب مع

margin: 0 auto;

إذا كنت تريد توسيط النص أيضًا ، فحاول استخدام:

text-align: center;
18
user1817972

CSS 3:

يمكنك استخدام النمط التالي على الحاوية الأصل لتوزيع العناصر الفرعية بالتساوي أفقيًا:

display: flex;
justify-content: space-between;  // <-- space-between or space-around

A Nice DEMO بخصوص القيم المختلفة لـ justify-content.

 Enter image description here

CanIUse: توافق المتصفح

جربه !:

#containerdiv {
  display: flex;
  justify-content: space-between;
}

#containerdiv > div {
  background-color: blue;
  width: 50px;
  color: white;
  text-align: center;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div id="containerdiv">
    <div>88</div>
    <div>77</div>
    <div>55</div>
    <div>33</div>
    <div>40</div>
    <div>45</div>
  </div>
</body>
</html>
8
Legends

لقد طبقت أسلوب مضمّن على div الداخلي. استخدم هذه.

<div id="outer" style="width:100%">  
    <div id="inner" style="display:table;margin:0 auto;">Foo foo</div>
</div>
8
aamirha

اعتبارًا من عام 2019 نظرًا لأن هذا السؤال لا يزال يحصل على الكثير من الزيارات ، فإن إجابة المستعرض المتقاطعة للغاية والمركز الأفقي هي تطبيق هذه القاعدة على العنصر الأصل:

.parentBox {
 display: flex;
 justify-content: center
}
8
Ady Ngom
#inner {
    width: 50%;
    margin: 0 auto;
}
7
anand jothi

يمكنك تحقيق ذلك باستخدام CSS Flexbox . تحتاج فقط إلى تطبيق 3 خصائص على العنصر الأصل للحصول على كل شيء يعمل.

#outer {
  display: flex;
  align-content: center;
  justify-content: center;
}

ألقِ نظرة على الكود أدناه وهذا سيجعلك تفهم الخصائص بشكل أفضل.

تعرف على المزيد حولCSS Flexbox

#outer {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ddd;
  width: 100%;
  height: 200px;
 }
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>
7
Saurav Rastogi

يمكنك ببساطة استخدام flexbox مثل هذا:

#outer {
  display: flex;
  justify-content: center
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

تطبيق Autoprefixer لجميع دعم المتصفح:

#outer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center
}

او اخرى

استخدام تحويل :

#inner {
      position: absolute;
      left: 50%;
      transform: translate(-50%)
    }
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

مع Autoprefixer:

#inner {
  position: absolute;
  left: 50%;
  -webkit-transform: translate(-50%);
      -ms-transform: translate(-50%);
          transform: translate(-50%)
}
7
Shashin Bhayani

الشيء الجميل الذي وجدته مؤخرًا ، والذي يجمع بين استخدام line-height + vertical-align والخدعة اليسرى 50% ، يمكنك center مربع بحجم ديناميكي داخل مربع آخر ذي حجم ديناميكي ، على كل من الأفقي والرأسي باستخدام CSS خالص.

لاحظ أنه يجب استخدام المسافات (و inline-block) ، التي تم اختبارها في المتصفحات الحديثة + IE8. HTML:

  <h1>Center dynamic box using only css test</h1>
    <div class="container">
        <div class="center">
            <div class="center-container">
                <span class="dyn-box">
                    <div class="dyn-head">This is a head</div>
                    <div class="dyn-body">
                        This is a body<br />
                        Content<br />
                        Content<br />
                        Content<br />
                        Content<br />
                    </div>
                </span>
            </div>
        </div>
    </div>

CSS:

.container
{
    position:absolute;
    left:0;right:0;top:0;bottom:0;
    overflow:hidden;
}
.center
{
    position:absolute;
    left:50%; top:50%;
}
.center-container
{
    position:absolute;
    left:-2500px;top:-2500px;
    width:5000px;height:5000px;
    line-height:5000px;
    text-align:center;
    overflow: hidden;
}
.dyn-box
{
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;

    /* Purely asthetic below this point */
    background: #808080;
    padding: 13px;
    border-radius: 11px;
    font-family: arial;
}
.dyn-head
{
    background:red;
    color:white;
    min-width: 300px;
    padding: 20px;
    font-size: 23px;
}
.dyn-body
{
    padding: 10px;
    background:white;
    color:red;
}

انظر المثال هنا .

7
Josh Mc

ماذا عن CSS أدناه لـ #inner div:

#inner {
  width: 50%;
  margin-left: 25%;
}

أنا في الغالب استخدام هذا CSS لتوسيط divs.

6
Rajesh

مركز div في div

.outer {
  display: -webkit-flex;
  display: flex;

  //-webkit-justify-content: center;                                                    
  //justify-content: center;
  
  //align-items: center;

  width: 100%;
  height: 100px;
  background-color: lightgrey;
}

.inner {
  background-color: cornflowerblue;
  padding: 2rem;
  margin: auto;  
  
  //align-self: center;                                         
}
<div class="outer">  
  <div class="inner">Foo foo</div>
</div>
4
antelove

أنا فقط استخدم الحل الأبسط ، لكنه يعمل في جميع المتصفحات:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>center a div within a div?</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }

            #outer{
                width: 80%;
                height: 500px;
                background-color: #003;
                margin: 0 auto;
            }

            #outer p{
                color: #FFF;
                text-align: center;
            }

            #inner{
                background-color: #901;
                width: 50%;
                height: 100px;
                margin: 0 auto;

            }

            #inner p{
                color: #FFF;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <div id="outer"><p>this is the outer div</p>
            <div id="inner">
                <p>this is the inner div</p>
            </div>
        </div>
    </body>
</html>
4
Gerald Goshorn

استعمال:

<div id="parent">
  <div class="child"></div>
</div>

قلم المدقة:

#parent {
   display: flex;
   justify-content: center;
}

إذا كنت تريد توسيطها أفقيًا ، فيجب أن تكتب على النحو التالي:

#parent {
   display: flex;
   justify-content: center;
   align-items: center;
}
4
Руслан

من الممكن استخدام CSS 3 flexbox . لديك طريقتين عند استخدام مربع المرن.

  1. اضبط الأصل display:flex; وأضف الخصائص {justify-content:center; ,align-items:center;} إلى العنصر الأصل.
#outer{
  display: flex;
  justify-content: center;
  align-items: center;
  }
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>
  1. عيّن الأصل display:flex وأضف margin:auto; إلى الطفل.
#outer{
  display: flex;
}
#inner{
  margin: auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>
4
Dream Hunter - hashADH

يمكن أيضًا توسيطه أفقيًا وعموديًا باستخدام وضع مطلق ، مثل هذا:

#outer{
    position: relative;
}

#inner{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}
4
Agu Dondo

يمكنك استخدام flexbox.

#inner {
   display: flex;
   justify-content: center;
}

يمكنك معرفة المزيد حول هذا الموضوع على هذا الرابط: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

4
Cyan Baltazar

أردت الإجابة على هذا لأنني لاحظت أن أحدا لم يذكر طريقة حساب. الاستخدام للقسم الذي تركزه ، إذا كنت تعرف عرضه ، فلنفترض أنه 1200 بكسل ، اذهب إلى:

.container {
    width:1200px;
    margin-left: calc(50% - 600px);
}

لذلك سوف يضيف هامشًا يساوي 50٪ مطروحًا منه نصف العرض المعروف.

3
serdarsenay

أفضل طريقة معروفة تستخدم على نطاق واسع وتعمل في العديد من المتصفحات بما في ذلك القديمة ، تستخدم margin على النحو التالي:

#parent {
  width: 100%;
  background-color: #cccccc;
}

#child {
  width: 30%; /*we need the width*/
  margin: 0 auto; /*this does the magic*/
  color: #ffffff;
  background-color: #000000;
  padding: 10px;
  text-align: center;
}
<div id="parent">
  <div id="child">I'm the child and I'm horizontally centered! My daddy is a greyish div dude!</div>
</div>

شغّل الكود لترى كيف يعمل ، وهناك أيضًا شيئان مهمان لا يجب أن تنسيا في CSS عندما تحاول توسيطهما بهذه الطريقة: margin: 0 auto; التي تجعله مركز div كما هو مطلوب ، بالإضافة إلى لا تنسى width للطفل ، وإلا فلن تتمركز كما هو متوقع!

3
Alireza

اجعله بسيط!

#outer {
  display: flex;
  justify-content: center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>
3
Hassan Siddiqui

يمكنك أن تفعل ذلك شراء باستخدام الساحرة فليكس بوكس ​​هي تقنية جيدة في هذه الأيام. لاستخدام المربع المرن ، يجب عليك إعطاء display: flex; و align-items: center; إلى والدك أو عنصر #outer div. يجب أن يكون الرمز مثل هذا:

#outer {
  display: flex;
  align-items: center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

هذا يجب أن يكون مركز طفلك أو #inner div أفقياً. لكن لا يمكنك رؤية أي تغييرات بالفعل. نظرًا لأن #outer div ليس له ارتفاع أو بعبارة أخرى ، يتم تعيين ارتفاعه على تلقائي بحيث يكون له نفس ارتفاع جميع عناصره الفرعية. لذلك بعد قليل من التصميم المرئي ، يجب أن يكون رمز النتيجة كما يلي:

#outer {
  height: 500px;
  display: flex;
  align-items: center;
  background-color: blue;
}

#inner {
  height: 100px;
  background: yellow;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

يمكنك أن ترى #inner div تتمركز الآن. Flex-box هو الطريقة الجديدة لوضع العناصر في مجموعات متداخلة أفقية أو رأسية باستخدام CSS وحصلت على 96٪ من توافق المتصفحات العالمية. لذلك أنت حر في استخدامه ، وإذا كنت ترغب في معرفة المزيد عن S CSS-Tricks مقالة فليكس بوكس ​​، فهذا هو أفضل مكان لتعلم استخدام فليكس بوكس ​​في رأيي.

3
Morteza Sadri

سيؤدي هذا بالتأكيد إلى تركيز رمز #inner الخاص بك أفقيًا وعموديًا هذا متوافق أيضًا في جميع المتصفحات. لقد أضفت تصميمًا إضافيًا فقط لإظهار كيف تتمحور حوله.

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  top: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%); 
  -o-transform: translate(-50%,-50%);
} 
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

ولكن بالطبع إذا كنت تريد فقط محاذاة أفقياً ، فقد يساعدك ذلك.

#outer {
  background: black;
  position: relative;
  width:150px;
  height:150px;
}

#inner { 
  background:white;
  position: absolute;
  left:50%;
  transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
  -moz-transform: translate(-50%,0); 
  -o-transform: translate(-50%,0);
} 
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>
3
Mark Salvania

أفضل ما استخدمته في مشاريعي المختلفة هو

<div class="outer">
    <div class="inner"></div>
</div>
.outer{
  width: 500px;
  height: 500px;
  position: relative;
  background: yellow;
}
.inner{
  width: 100px;
  height: 100px;
  background:red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

رابط الكمان

3
Jaison

فيما يلي طريقة أخرى للتوسيط الأفقي باستخدام flexbox وبدون تحديد أي عرض للحاوية الداخلية. الفكرة هي استخدام عناصر زائفة من شأنها دفع المحتوى الداخلي من اليمين واليسار.

باستخدام flex:1 في عنصر الزائف سيجعلها تملأ الفراغات المتبقية وتتخذ نفس الحجم وستتركز الحاوية الداخلية.

.container {
  display: flex;
  border: 1px solid;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}
<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

يمكننا أيضًا النظر في نفس الموقف للمحاذاة العمودية عن طريق تغيير اتجاه flex إلى عمود:

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid;
  min-height: 200px;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}
<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>
3
Temani Afif

هذا مركزيا div الداخلية أفقيا وعموديا:

#outer{
    display: flex;
}
#inner{
    margin: auto;
}

للمحاذاة الأفقية فقط ، تغيير

margin: 0 auto;

وللرأسي ، التغيير

margin: auto 0;
2
Shivam Chhetri

CSS

#inner {
  display: table;
  margin: 0 auto; 
}

HTML

<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>
2
Abdul Ghaffar

بعد قراءة كل الإجابات ، لم أر الإجابة التي أفضلها. هذه هي الطريقة التي يمكنك توسيط عنصر في آخر.

jsfiddle - http://jsfiddle.net/josephtveter/w3sksu1w/

<p>Horz Center</p>
<div class="outterDiv">
    <div class="innerDiv horzCenter"></div>
</div>
<p>Vert Center</p>
<div class="outterDiv">
    <div class="innerDiv vertCenter"></div>
</div>
<p>True Center</p>
<div class="outterDiv">
    <div class="innerDiv trueCenter"></div>
</div>
.vertCenter
{
    position: absolute;
    top:50%;
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.horzCenter
{
    position: absolute;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.trueCenter
{
    position: absolute;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.outterDiv
{
    position: relative;
    background-color: blue;
    width: 10rem;
    height: 10rem;
    margin: 2rem;
}
.innerDiv
{
    background-color: red;
    width: 5rem;
    height: 5rem;
}
2
Mardok

يمكنك إضافة هذا الرمز:

#inner {
  width: 90%;
  margin: 0 auto;
  text-align:center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>
2
Rafiqul Islam

وفقًا لظروفك ، يمكن أن يكون الحل الأبسط:

margin:0 auto; float:none;
2
Justin Munce

أسهل إجابة add margin: auto؛ إلى الداخل.

<div class="outer">
  <div class="inner">
    Foo foo
  </div>
</div>

كود المغلق

.outer{ width:100%; height:300px; background:yellow;}
.inner{width:30%; height:200px; margin:auto; background:red; text-align:center}

تحقق من رابط codepen http://codepen.io/feizel/pen/QdJJrK

 enter image description here

2
Faizal Munna

أعط بعض width للداخلية div وأضف margin:0 auto; في خاصية CSS.

2
Mr.Pandya

استعمال:

<style>
  #outer{
    text-align: center;
    width: 100%;
  }
  #inner{
    text-align: center;
  }
</style>
2
SUNIL KUMAR E.U

نعم ، هذا رمز قصير ونظيف للمحاذاة الأفقية. آمل أن تكونوا مثل هذا الرمز.

.classname {
   display: box;
   margin: 0 auto;
   width: 500px /* Width set as per your requirement. */;
}
2
Banti Mathur

استخدم الكود أدناه.

HTML

<div id="outer">
  <div id="inner">Foo foo</div>
</div>

CSS

#outer {
  text-align: center;
}
#inner{
  display: inline-block;
}
2
Faizal

استخدم هذا الكود:

<div id="outer">
    <div id="inner">Foo foo</div>
</div>

#inner {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}
2
Husain Ahmed
<div id="outer" style="width:100%;margin: 0 auto; text-align: center;">  
  <div id="inner">Foo foo</div>
</div>
2
Qmr

انها بسيطة جدا.

ما عليك سوى تحديد العرض الذي تريد تقديمه للقسمة الداخلية واستخدام CSS التالي.

CSS

.inner{
  width: 500px; // Assumed width
  margin: 0 auto;
}
2
Gaurav Aggarwal
.outer
{
  background-color: rgb(230,230,255);
  width 100%;
  height: 50px;
}
.inner
{
  background-color: rgb(200,200,255);
  width: 50%;
  height: 50px;
  margin: 0 auto;
}
<div class="outer">
  <div class="inner">
    margin 0 auto
  </div>
</div>
2
pavelbere

يمكنك استخدام سطر واحد من التعليمات البرمجية ، فقط text-align:center.

إليك مثال:

#inner {
  text-align:center;
  }
<div id="outer" style="width:100%">
  <div id="inner"><button>hello</button></div>
</div>
2
Yahya Essam

إحدى أسهل الطرق التي يمكنك من خلالها القيام بذلك هي استخدام display: flex. يحتاج div الخارجي فقط إلى عرض مرن ، والاحتياجات الداخلية margin: 0 auto لجعله مركزًا أفقيًا.

للتوسيط رأسياً ووسط توسيط div داخل div آخر ، يرجى إلقاء نظرة على تعليقات فئة .inner أدناه

.wrapper {
  display: flex;
  /* Adding whatever height & width we want */
  height: 300px;
  width: 300px;
  /* Just so you can see it is centered */
  background: peachpuff;
}

.inner {
  /* center horizontally */
  margin: 0 auto;
  /* center vertically */
  /* margin: auto 0; */
  /* center */
  /* margin: 0 auto; */
}
<div class="wrapper">
  <div class="inner">
    I am horizontally!
  </div>
</div>
2
drewkiimon
#outer {postion: relative}
#inner {
    width: 100px; 
    height: 40px; 
    position: absolute;
    top: 50%;
    margin-top:-20px; /* Half of your Height */
}
2
Majid Sadr

أنا آسف ولكن هذا الطفل من 1990 عملت للتو بالنسبة لي:

<div id="outer">  
  <center>Foo foo</center>
</div>

هل سأذهب إلى الجحيم لهذه الخطية؟

2
Heitor

يمكننا استخدام فئة CSS التالية التي تسمح للمركز رأسياً وأفقياً بأي عنصر ضد الوالدين:

.centerElement{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
2
Elias MP

HTML:

<div id="outer">
  <div id="inner">
  </div>
</div>

CSS:

#outer{
  width: 500px;
  background-color: #000;
  height: 500px
}
#inner{
  background-color: #333;
  margin: 0 auto;
  width: 50%;
  height: 250px;
}

Fiddle .

1
Fahad Uddin

أفضل طريقة هي استخدام شاشة خلية الجدول (داخلية) التي تأتي بعد div تمامًا مع جدول العرض (الخارجي) وتعيين محاذاة رأسية لل div الداخلية (مع شاشة خلية الجدول) وكل علامة تستخدمها في div الداخلية الموضوعة في وسط div أو الصفحة.

ملاحظة: يجب عليك تعيين ارتفاع محدد إلى الخارجي

إنها أفضل طريقة تعرفها دون وضع نسبي أو مطلق ، ويمكنك استخدامها في كل متصفح بنفس الطريقة.

#outer{
  display: table;
  height: 100vh;
  width: 100%;
}


#inner{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
<div id="outer">
    <div id="inner">
      <h1>
          set content center
      </h1>
      <div>
        hi this is the best way to align your items center
      </div>
    </div>
</div>
1
hossein ghaem

بدلاً من الأغلفة المتعددة و/أو الهوامش التلقائية ، يعمل هذا الحل البسيط بالنسبة لي:

<div style="top:50%; left:50%;
    height:100px; width:100px;
    margin-top:-50px; margin-left:-50px;
    background:url('lib/loading.gif') no-repeat center #fff;
    text-align:center;
    position:fixed; z-index:9002;">Loading...</div>

يضع div في مركز العرض (عموديًا وأفقيًا) ، وأحجامًا وضبطًا للحجم ، وصورة مركز الخلفية (عموديًا وأفقيًا) ، ووسط النص (أفقيًا) ، ويبقي div في العرض وفي أعلى المحتوى. ببساطة ضع في HTML body واستمتع بها.

1
Cees Timmerman

جرب هذا:

#outer{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

#outer > #inner{
    display: inline-block;
    font-size: 19px;
    margin: 20px;
    max-width: 320px;
    min-height: 20px;
    min-width: 30px;
    padding: 14px;
    vertical-align: middle;
}
1
Ajay Gupta

هذا عملت لي:

   #inner {
    position: absolute;
    margin: 0 auto;
    left: 0;
    width: 7%;
    right: 0;
}

في هذا الرمز ، يجب أن تحدد عرض العنصر.

1
Fatemeh Khosravi Farsani

لقد وجدت ما شابه ذلك مع margin-left ، ولكن يمكن أن يكون left أيضًا.

#inner{
    width: 100%;
    max-width: 65px; /*to adapt to screen width. Can be whatever you want*/
    left: 65px; /*this has to be approximately the same as the max-width*/
}
1
iorgu
#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>
1
Anu

أعلم أنني تأخرت كثيرًا عن الإجابة على هذا السؤال ، ولم أكن أزعجني قراءة كل إجابة واحدة لذلك قد هذا تكرار. ها هي خذتي :

inner { width: 50%; background-color: Khaki; margin: 0 auto; }
1
uSeRnAmEhAhAhAhAhA

ببساطة Margin:0px auto:

#inner{
  display: block;
  margin: 0px auto;
  width: 100px;
}
<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>
1
Sankar

إضافة text-align:center; إلى div div

#outer {
    text-align: center;
}

https://jsfiddle.net/7qwxx9rs/

أو

#outer > div {
    margin: auto;
    width: 100px;
}

https://jsfiddle.net/f8su1fLz/

1
Friend
#outer {
  width: 160px;
  padding: 5px;
  border-style: solid;
  border-width: thin;
  display: block;
}

#inner {
  margin: auto;
  background-color: lightblue;
  border-style: solid;
  border-width: thin;
  width: 80px;
  padding: 10px;
  text-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>
1
Galarist

السمات الرئيسية لتوسيط div هي margin: auto و width: وفقًا للمتطلبات:

.DivCenter{
    width: 50%;
    margin: auto;
    border: 3px solid #000;
    padding: 10px;
}
1
Anu
div{
   width:100px;
   height:100px;
   margin:0 auto;
  }

لشيء طبيعي إذا كنت تستخدم div ثابت الطريقة

إذا كنت ترغب في أن تكون div في الوسط عندما يكون div مطلقًا بالنسبة إلى والدها هنا ، فعلى سبيل المثال:

.parentdiv{
   position:relative;
   height:500px;
}

.child_div{
   position:absolute;
   height:200px;
   width:500px;
   left:0;
   right:0;
   margin:0 auto;
}
1
Mohammed Rabiulla RABI

يمكنك أن تفعل ذلك بطريقة مختلفة. انظر الأمثلة أدناه:

1. First Method
#outer {
   text-align: center;
   width: 100%;
}
#inner {
   display: inline-block;
}


2. Second method
#outer {
  position: relative;
  overflow: hidden;
}
.centered {
   position: absolute;
   left: 50%;
}
1
Gaurang Sondagar

جرب هذا:

<div id="a">
    <div id="b"></div>
</div>

CSS:

#a{
   border: 1px solid red;
   height: 120px;
   width: 400px
}

#b{
   border: 1px solid blue;
   height: 90px;
   width: 300px;
   position: relative;
   margin-left: auto;
   margin-right: auto;
}
1
hossein ketabi

أولاً وقبل كل شيء: تحتاج إلى تقديم عرض للقسم الثاني:

فمثلا:

HTML

<div id="outter">
    <div id="inner"Centered content">
    </div
</div>

CSS:

 #inner{
     width: 50%;
     margin: auto;
}

لاحظ أنه إذا لم تقدم له عرضًا ، فسوف يستغرق عرض الخط بالكامل.

1
user3968801

أضف CSS إلى div الداخلي. اضبط margin: 0 auto وقم بتعيين عرضه أقل من 100٪ ، وهو عرض div الخارجي.

<div id="outer" style="width:100%"> 
    <div id="inner" style="margin:0 auto;width:50%">Foo foo</div> 
</div>

هذا سيعطي النتيجة المرجوة.

0
Joseph
#inner {
  width: 50%;
  margin: 0 auto;
}
0
Javed Khan