وثائق CSS قابلة للتشغيل: توسيط div

Q: كيف أوسّط div أفقيًا وعموديًا؟

اجعل الأب شبكة grid ووسّط محتواها: .parent { display: grid; place-items: center; }. ونسخة flexbox هي display: flex; justify-content: center; align-items: center;. في الحالتين يحتاج الأب إلى ارتفاع أكبر من الـ div.

Q: كيف أوسّط div أفقيًا فقط؟

أعطه عرضًا وهوامش جانبية تلقائية: .box { width: 300px; margin: 0 auto; } (أو max-width لعنصر متجاوب). وmargin-inline: auto هي الشيء نفسه بالخصائص المنطقية.

Q: ما أسهل طريقة لتوسيط div؟

display: grid; place-items: center; على الأب: تصريحان، والمحوران، وأي حجم للابن. استخدم flexbox حين يرتّب الأب عناصر أخرى في صف أيضًا.

Q: كيف أوسّط النص داخل div؟

استخدم text-align: center على الـ div للنص والمحتوى السطري. توسيط الـ div نفسه وتوسيط النص داخله مهمتان منفصلتان.

الإجابة المختصرة

لتوسيط div أفقيًا وعموديًا معًا داخل أبيه، اجعل الأب شبكة grid ووسّط محتواها:

.parent {
  display: grid;
  place-items: center;
  min-height: 200px; /* the parent needs room to center in */
}

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Six ways to center</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 12px; margin: 8px; }
    .grid-of-demos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
    .stage { height: 130px; background: #e5e7eb; border: 1px solid #9ca3af; }
    .box { width: 100px; padding: 8px; background: #2563eb; color: white; text-align: center; }
    p { margin: 4px 0 0; }

    .flex { display: flex; justify-content: center; align-items: center; }
    .grid { display: grid; place-items: center; }
    .auto { display: flex; }
    .auto .box { margin: auto; }
    .abs { position: relative; }
    .abs .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .inset { position: relative; }
    .inset .box { position: absolute; inset: 0; margin: auto; height: 20px; }
    .content { align-content: center; }
    .content .box { margin-inline: auto; }
  </style>
</head>
<body>
  <div class="grid-of-demos">
    <div><div class="stage flex"><div class="box">flex</div></div><p></p></div>
    <div><div class="stage grid"><div class="box">grid</div></div><p></p></div>
    <div><div class="stage auto"><div class="box">margin: auto</div></div><p></p></div>
    <div><div class="stage abs"><div class="box">absolute</div></div><p></p></div>
    <div><div class="stage inset"><div class="box">inset: 0</div></div><p></p></div>
    <div><div class="stage content"><div class="box">align-content</div></div><p></p></div>
  </div>
  <script>
    document.querySelectorAll('.stage').forEach((stage) => {
      const s = stage.getBoundingClientRect();
      const b = stage.querySelector('.box').getBoundingClientRect();
      const dx = (b.left + b.width / 2) - (s.left + s.width / 2);
      const dy = (b.top + b.height / 2) - (s.top + s.height / 2);
      stage.nextElementSibling.textContent =
        'off center: x ' + Math.round(dx) + 'px, y ' + Math.round(dy) + 'px';
    });
  </script>
</body>
</html>

الطرق الست كلها تعرض 0px على المحورين (حد المنصة البالغ 1px متساوٍ على كل الجوانب، فلا يزيح المركز). غيّر عرض صندوق أو نصه وشغّل المثال مرة أخرى: الطرق التي لا تعتمد على حجم ثابت تبقى عند 0.

أي طريقة تستخدم

الطريقة	توسّط	هل يحتاج الابن إلى حجم ثابت؟	الأنسب لـ
Grid مع `place-items: center`	المحورين	لا	الخيار الافتراضي: ابن واحد في صندوق
Flexbox مع `justify-content` و`align-items`	المحورين	لا	صف أو عمود من العناصر، موسّطة كمجموعة
`margin: auto` في أب flex أو grid	المحورين	لا	توسيط عنصر واحد بينما يُرتَّب إخوته بشكل مختلف
`margin: 0 auto`	أفقيًا فقط	`width` أو `max-width`	حاويات الصفحات، والمقالات، والنماذج في التدفق العادي
Absolute مع `translate(-50%, -50%)`	المحورين	لا	الطبقات، والشارات، والنوافذ المنبثقة فوق محتوى آخر
Absolute مع `inset: 0; margin: auto`	المحورين	نعم، العرض والارتفاع	مربعات الحوار ثابتة الحجم
`align-content: center` على عنصر كتلي	عموديًا	لا	التوسيط العمودي من دون تغيير display الأب

الطريقة 1: flexbox

يوسّط flexbox على محورين بخاصيتين. تتولى justify-content المحور الرئيسي (الأفقي في الصف)، وalign-items المحور العرضي:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with flexbox</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: flex;
      justify-content: center; /* horizontal */
      align-items: center;     /* vertical */
      gap: 8px;
      height: 180px;
      background: #e5e7eb;
    }
    .child { padding: 12px 16px; background: #16a34a; color: white; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="child">One</div>
    <div class="child">Two</div>
    <div class="child">Three</div>
  </div>
</body>
</html>

مع عدة أبناء يوسّطهم flexbox كمجموعة، ويبقيهم في صف. هنا يتفوق على grid، التي كانت ستكدّس العناصر الثلاثة في عمود واحد موسّط. تشرح صفحة justify-content كل قيم المحاذاة.

الطريقة 2: grid

place-items: center اختصار لـ align-items: center مع justify-items: center. على حاوية grid بابن واحد توسّط ذلك الابن في الاتجاهين:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with grid</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: grid;
      place-items: center;
      min-height: 180px;
      background: #e5e7eb;
    }
    .card { max-width: 220px; padding: 16px; background: white; border: 2px solid #2563eb; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="card" id="card">A card of any size, centered by its parent.</div>
  </div>
</body>
</html>

استخدام min-height بدل height يسمح للأب بأن يكبر إن صارت البطاقة أطول من 180px، بدل أن يفيض محتوى البطاقة.

الطريقة 3: margin: 0 auto (أفقيًا)

العنصر الكتلي الذي عرضه أصغر من حاويته يمكن توسيطه أفقيًا بهوامش جانبية تلقائية. يقسم المتصفح المساحة الحرة بالتساوي بين الجانبين:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>margin auto</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .page {
      max-width: 360px;
      margin: 0 auto;          /* same as margin-inline: auto */
      padding: 16px;
      background: #fef3c7; border: 2px solid #f59e0b;
    }
    .no-width { margin: 12px auto 0; padding: 16px; background: #fee2e2; border: 2px solid #dc2626; }
  </style>
</head>
<body>
  <div class="page" id="page">max-width: 360px and margin: 0 auto</div>
  <div class="no-width" id="nowidth">margin: auto without a width: nothing to center</div>
</body>
</html>

الصندوق الثاني يملأ العرض كله، فلا توجد مساحة حرة ولا يتحرك شيء. هذا هو السبب المعتاد لكون margin: 0 auto «لا تعمل». كما أنها توسّط أفقيًا فقط في التدفق العادي؛ فالهوامش العمودية auto تصبح 0 هناك. لكن داخل أب flex أو grid، توسّط margin: auto في الاتجاهين، وهو الصندوق الثالث في المقارنة أعلاه.

الطريقة 4: الموضع المطلق وtransform

حين يجب أن يقع العنصر فوق محتوى آخر (شارة على صورة، نافذة منبثقة فوق الصفحة)، ضعه بموضع مطلق عند 50% ثم اسحبه إلى الخلف بمقدار نصف حجمه:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute centering</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .photo {
      position: relative;      /* the reference box */
      height: 180px;
      background: linear-gradient(135deg, #bfdbfe, #1e3a8a);
    }
    .play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 12px 20px;
      background: white; border-radius: 999px; font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="photo" id="photo">
    <div class="play" id="play">Play</div>
  </div>
</body>
</html>

تضع top: 50%; left: 50% الزاوية العلوية اليسرى للعنصر في المركز. والنسب المئوية في translate() تشير إلى حجم العنصر نفسه، فتعيده -50% بمقدار نصف عرضه وارتفاعه مهما كانا. يجب أن يكون الأب مُموضَعًا (position: relative)، وإلا فسيتوسط العنصر في الصفحة بدلًا من ذلك. الموضعة مشروحة في صفحة position.

نسخة للعناصر ذات الحجم المعروف: position: absolute; inset: 0; margin: auto; مع width وheight. تتقاسم الهوامش التلقائية المساحة على الجوانب الأربعة.

الطريقة 5: align-content على عنصر كتلي عادي

تعمل align-content: center الآن أيضًا على الحاويات الكتلية العادية، لا على حاويات flex وgrid فقط. توسّط المحتوى عموديًا من دون تغيير طريقة ترتيب الأبناء:

.parent {
  min-height: 200px;
  align-content: center;   /* vertical centering, still display: block */
}
.child {
  max-width: 300px;
  margin-inline: auto;     /* horizontal centering */
}

مدعومة في الإصدارات الحالية من Chrome وFirefox وSafari. المتصفحات الأقدم تتجاهلها، فاستخدم grid إن كان عليك دعمها.

التوسيط في الشاشة كلها

لتوسيط مربع حوار في نافذة العرض بغض النظر عن التمرير، اجمع طبقة ثابتة بملء الشاشة مع grid:

.overlay {
  position: fixed;
  inset: 0;                     /* covers the viewport */
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 50%);
}

لتوسيط محتوى صفحة كاملة عموديًا، استخدم min-height: 100dvh على الأب بدل 100vh: على الهواتف تشمل 100vh المنطقة التي خلف أشرطة أدوات المتصفح، فيقع «المركز» منخفضًا أكثر من اللازم.

توسيط النص مهمة مختلفة

كل ما سبق يوسّط صندوقًا. لتوسيط النص داخل صندوق استخدم text-align: center عليه، كما تعرض صفحة توسيط النص في HTML. غالبًا تحتاج إلى الاثنين: grid لتوسيط البطاقة، وtext-align لتوسيط الأسطر داخلها.

أخطاء شائعة

أب بلا ارتفاع. التوسيط العمودي يحتاج إلى مساحة حرة؛ والأب الذي يتقلص إلى محتواه لا يملك أي مساحة.
margin: 0 auto على عنصر كتلي بعرض كامل. أعطه width أو max-width أولًا.
margin: auto للتوسيط العمودي في التدفق العادي. الهوامش العمودية التلقائية تساوي 0 هناك؛ استخدم flex أو grid.
التوسيط المطلق من دون أب مُموضَع. يتوسط العنصر في الصفحة لا في الصندوق.
align-items: center على الابن. خصائص المحاذاة توضع على الأب (حاوية flex أو grid)، باستثناء margin: auto وalign-self.
text-align: center لتوسيط عنصر كتلي. توسّط المحتوى السطري (النص، والصور، والأبناء من نوع inline-block)، لا الابن الكتلي.

الأسئلة الشائعة

كيف أوسّط div أفقيًا وعموديًا؟

اجعل الأب شبكة grid ووسّط محتواها: .parent { display: grid; place-items: center; }. ونسخة flexbox هي display: flex; justify-content: center; align-items: center;. في الحالتين يحتاج الأب إلى ارتفاع أكبر من الـ div.

كيف أوسّط div أفقيًا فقط؟

أعطه عرضًا وهوامش جانبية تلقائية: .box { width: 300px; margin: 0 auto; } (أو max-width لعنصر متجاوب). وmargin-inline: auto هي الشيء نفسه بالخصائص المنطقية.

لماذا لا يوسّط margin: 0 auto الـ div عندي؟

ليس للـ div عرض أصغر من حاويته، فلا توجد مساحة حرة لتقسيمها (العنصر الكتلي يملأ العرض كاملًا افتراضيًا). اضبط width أو max-width. كما أنها لا تفعل شيئًا على العناصر السطرية ولا توسّط عموديًا أبدًا في التدفق العادي.

لماذا لا يتوسط الـ div عموديًا؟

الأب بارتفاع محتواه فقط، فلا توجد مساحة إضافية للتوسيط فيها. أعطِ الأب ارتفاعًا (أو min-height)، ثم استخدم توسيط grid أو flexbox.

ما أسهل طريقة لتوسيط div؟

display: grid; place-items: center; على الأب: تصريحان، والمحوران، وأي حجم للابن. استخدم flexbox حين يرتّب الأب عناصر أخرى في صف أيضًا.

كيف أوسّط النص داخل div؟

استخدم text-align: center على الـ div للنص والمحتوى السطري. توسيط الـ div نفسه وتوسيط النص داخله مهمتان منفصلتان.

مفاهيم ذات صلة