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

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

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

#inner {
  display: inline-block;
}

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

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

أفضل الطرق هي مع 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;
}

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

• الرابط 2

• الرابط 3

• رابط 4

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

• لماذا يعتبر نموذج مربع W3C أفضل؟

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

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

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

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

https://jsfiddle.net/gjvfxxdj/

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

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

#outer {
  position: relative;
}

و...

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

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

ذكرت بعض الملصقات طريقة 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 إليك مكان جيد للبحث.

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

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

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

توسيط 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 .

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

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

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

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

اضطررت مؤخرًا إلى توسيط 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>

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

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

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

بالنسبة إلى 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 لدعم المتصفحات القديمة.

هذا هو جوابي.

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}

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

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

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

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

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

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

كريس كويير الذي كتب وظيفة ممتازة حول "التمركز في المجهول" على مدونته. انها جولة في حلول متعددة. لقد نشرت واحدة لم يتم نشرها في هذا السؤال. يحتوي على مزيد من دعم المستعرض ثم الحل فليكس بوكس ​​، وأنت لا تستخدم 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;
}

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

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

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

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

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

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>

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

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

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

الحاوية:

• يجب أن يكون 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 !

أسهل طريقة:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}

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

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

• .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%;
}

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

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 % );
}

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

#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 ؛

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

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

• display: block
• display: inline
• display: inline-block

#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>

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

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

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

حسنًا ، لقد تمكنت من العثور على حل ربما يناسب جميع المواقف ، ولكن باستخدام 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);
  })
});

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

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

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

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

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

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

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

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 */
}

إذا كان أي شخص يرغب في حل 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;");
});

جرب اللعب مع

margin: 0 auto;

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

text-align: center;

CSS 3:

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

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

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

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>

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

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

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

.parentBox {
 display: flex;
 justify-content: center
}

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

يمكنك تحقيق ذلك باستخدام 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>

يمكنك ببساطة استخدام 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%)
}

الشيء الجميل الذي وجدته مؤخرًا ، والذي يجمع بين استخدام 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;
}

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

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

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

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

مركز 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>

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

<!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>

استعمال:

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

قلم المدقة:

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

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

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

من الممكن استخدام 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>

2. عيّن الأصل display:flex وأضف margin:auto; إلى الطفل.

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

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

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

#outer{
    position: relative;
}

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

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

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

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

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

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

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

أفضل طريقة معروفة تستخدم على نطاق واسع وتعمل في العديد من المتصفحات بما في ذلك القديمة ، تستخدم 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 للطفل ، وإلا فلن تتمركز كما هو متوقع!

اجعله بسيط!

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

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

يمكنك أن تفعل ذلك شراء باستخدام الساحرة فليكس بوكس ​​هي تقنية جيدة في هذه الأيام. لاستخدام المربع المرن ، يجب عليك إعطاء 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 مقالة فليكس بوكس ​​، فهذا هو أفضل مكان لتعلم استخدام فليكس بوكس ​​في رأيي.

سيؤدي هذا بالتأكيد إلى تركيز رمز #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>

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

<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%);
}

رابط الكمان

فيما يلي طريقة أخرى للتوسيط الأفقي باستخدام 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>

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

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

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

margin: 0 auto;

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

margin: auto 0;

CSS

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

HTML

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

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

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;
}

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

#inner {
  width: 90%;
  margin: 0 auto;
  text-align:center;
}

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

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

margin:0 auto; float:none;

أسهل إجابة 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

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

استعمال:

<style>
  #outer{
    text-align: center;
    width: 100%;
  }
  #inner{
    text-align: center;
  }
</style>

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

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

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

HTML

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

CSS

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

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

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

#inner {
  width: 50%;
  margin: 0 auto;
  text-align: center;
}

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

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

CSS

.inner{
  width: 500px; // Assumed width
  margin: 0 auto;
}

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

إليك مثال:

#inner {
  text-align:center;
  }

<div id="outer" style="width:100%">
  <div id="inner"><button>hello</button></div>
</div>

إحدى أسهل الطرق التي يمكنك من خلالها القيام بذلك هي استخدام 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>

#outer {postion: relative}
#inner {
    width: 100px; 
    height: 40px; 
    position: absolute;
    top: 50%;
    margin-top:-20px; /* Half of your Height */
}

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

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

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

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

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

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 .

أفضل طريقة هي استخدام شاشة خلية الجدول (داخلية) التي تأتي بعد 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>

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

<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 واستمتع بها.

جرب هذا:

#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;
}

هذا عملت لي:

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

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

لقد وجدت ما شابه ذلك مع 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*/
}

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

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

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

#inner{
  display: block;
  margin: 0px auto;
  width: 100px;
}

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

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

#outer {
    text-align: center;
}

https://jsfiddle.net/7qwxx9rs/

أو

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

https://jsfiddle.net/f8su1fLz/

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

.DivCenter{
    width: 50%;
    margin: auto;
    border: 3px solid #000;
    padding: 10px;
}

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. 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%;
}

جرب هذا:

<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;
}

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

فمثلا:

HTML

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

CSS:

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

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

أضف 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>

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

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