كيف يمكنني عمل center لdiv ؟

يمكن توسيط عنصر div باستخدام العديد من الطرق المختلفة في CSS. ومن بين هذه الطرق:

1- استخدام margin: auto

يمكن توسيط العنصر div بوضع margin: auto له. يجب على العنصر div أن يكون له عرض محدد ويجب أن يكون محيطه الخارجي مفعلًا.

مثال:

HTML:

<div class="container">
  <p>Hello, World!</p>
</div>

CSS:

.container {
  width: 50%;
  margin: auto;
}

2- استخدام flexbox

يمكن استخدام Flexbox لتوسيط عنصر div. يجب على العنصر الرئيسي (parent element) أن يكون له display: flex ويجب أن يستخدم justify-content: center و align-items: center.

مثال:

HTML:

<div class="container">
  <p>Hello, World!</p>
</div>

CSS:

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

3- استخدام grid

يمكن استخدام CSS grid لتوسيط عنصر div. يجب على العنصر الرئيسي (parent element) أن يكون له display: grid ويجب على العنصر الفرعي (child element) أن يكون له grid-column و grid-row محدد.

مثال:

HTML:

<div class="container">
  <p>Hello, World!</p>
</div>

CSS:

.container {
  display: grid;
  place-items: center;
  height: 100vh;
}

.container p {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  text-align: center;
}

يجب تحديد height للعنصر الرئيسي في حال استخدام Flexbox أو Grid، حتى يتم توسيط العنصر الفرعي بشكل صحيح. يمكن استخدام قيمة نسبية مثل vh لضمان أن الارتفاع يمتد عبر جميع شاشات العرض بشكل صحيح.

يوجد العديد من الطرق التي تقوم بتوسيط div في منتصف الشاشة وربما لا تعمل بعض الطرق معك بسبب بعض التنسيقات التي قمت بإضافتها للعنصر أو أن العنصر العنصر يأخذ ال width الكامل للشاشة والعديد من العوامل الأخرى لذلك يجب تجربة الطريقة المناسبة للكود الخاص بك وبالإضافة الطرق الموجودة بالتعليق السابق يمكن استخدام 

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

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

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

• كما يمكن استخدام ال position كالتالي 

  <div class="content">hello world</div>

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

   

سوف اشرح كل بعض الطرق البسيطة لكيفية وضع عنصر Div في منتصف الصفحة(يفضل أن يكون في منتصف Div أخر حتي يكون الكود منظم).

1- باستخدام Flexbox and margin: auto

HTML

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

CSS

#parent {
  display: flex;
}
#child {
  margin: auto;
}

يمنحنا Flexbox قدرات توزيع الفراغ والمحاذاة القوية جدًا، يتيح margin: auto للمتصفح اختيار هامش مناسب لعنصر الطفل(child) وهذا يعني أن تعيين حاوية (parent) كـ flex وإعطاء الطفل margin: auto يسمح للمتصفح بتوزيع المسافة المتبقية بالتساوي على كلا الاتجاهات الرأسية والأفقية.

2- باستخدام الخواص (position, top, left, right, bottom)

HTML (نفس الكود المذكور في المثال السابق)

CSS

#parent {
  position: relative;
}
#child {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

كما قلنا في المثال السابق يسمح margin: auto للمتصفح باختيار هامش مناسب للعنصر الطفل(child), و إذا ذكرنا top: 0، bottom: 0 و margin: auto فقط، فإنه يركز على عنصر الطفل(child) رأسيًا بالمثل، إذا ذكرنا left: 0، right: 0 و margin: auto فقط، فإنه سيركز على عنصر الطفل(child) أفقيًا وإذا ذكرنا جميع الخصائص كما هو في الكود أعلاه، فإنه سيركز على div متوسط تمامًا في كلا الاتجاهات أفقيًا ورأسيًا.

وعليكم السلام ,
يوجد أكثر من طريقة لتنفيذ center لل div :
1-لعمل center أفقيا :
في هذة الحالة فعمل margin:auto تفي بالغرض .
 

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

css
 

.center {
  border: 5px solid;
  margin: auto;
  width: 50%;
  padding: 10px;
}

_________
2- رأسيا :
من ضمن الطرق لعمل ذلك هو وضع الposition : absolute و وضع الtop او الbottom بقيمة 50%و ذلك يخبر المتصفح أن يضع الحد الأدنى من الchild في منتصف الparent 
و سوف نحتاج لأن نحركة لأعلى بقيمة 50% من قيمة ارفاع العنصر نفسو لذلك نستعمل transform:translate(0,50%)

.child {
  border: 5px solid;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  padding: 10px;
}

3-رأسيا و أفقيا :
1-عمل نفس الخطوات السابقة ولكن بإضافة left:50% و هو اخبار المتصفح أن يضع طرف الchild في منتصف الparent و سنحتاج أيضاتحريك الchild بنسبة 50% من قيمتة حتا يصبح منتصفة في منتصف الparent 
 

.child {
  border: 5px solid;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px;
}

1-باستعمال flexbox و هي الطريقة الأفضل :
حيث نقوم بعمل display :flex للparent و  نختار الاتجاه الأساسي و ليكن صف (row) على سبيل المثال فنقول : flex-direction:row و عمل justify-content:center و هذا معناة وضع محتوى الparent في المنتصف في الإتجاه الأساسي و الذي هو الأفقي في حالتنا 
و عمل أيضا align-items:center و هو معناة وضع محتويات الparent في الاتجاه الفرعي و هو الرأسي في حالتنا 
 

.parent{
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
}
.child{
border:10px solid;
padding:10px;
}

2- من الممكن أيضا تنفيذ نفس الطريقة السابقة باستعمال bootstrap كالتالي :


 

<div class="d-flex flex-row justify-content-center align-items-center" >
<div class="border border-2 border-solid p-4" ></div>
</div>

3-باستعمال grid system
display:grid 
و باستعمال place-items:center و التي تعمل لوضع العناصر في الcenter افقيا و رأسيا

.parent {
  display: grid;
  height: 100vh;
  place-items: center;
}

.child {
border:10px solid
padding:10px
}