التوسيط المثالي

في CSS، يُعد تحقيق "Perfect center"، أي centering عنصر أفقيًا وvertically داخل parent الخاص به، تحديًا شائعًا في التخطيط. يوفر Flexbox حلًا أنيقًا ومباشرًا لهذه المشكلة. من خلال الجمع بين الخاصيتين justify-content وalign-items، يمكنك بسهولة centering عنصر child داخل flex container الخاص به، بغض النظر عن حجم child أو parent. 

إليك كيفية تحقيق المحاذاة المركزية المثالية باستخدام Flexbox:

.container {
    display: flex; /* Turn the parent into a flex container */
    justify-content: center; /* Center the child horizontally along the main axis */
    align-items: center; /* Center the child vertically along the cross axis */
}

لجعل هذه التقنية تعمل بفعالية، تأكد من أن flex container له height محدد. إذا لم يتم تعيين height الخاص بـ container بشكل صريح، فسيكون ارتفاعه بقدر محتواه فقط، وقد لا يكون vertical centering واضحًا.

إليك مثالًا على كيفية استخدام هذه التقنية في HTML:

<div class="container">
    <div class="child">This is centered</div>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px; /* Set a specific height for the container */
    border: 1px solid black; /* Optional: Add a border for visualization */
}

.child {
    padding: 20px;
    border: 1px solid red;
}

في هذا المثال، يمتلك العنصر .container ارتفاعًا قدره 300px، وسيكون العنصر .child في Center بشكل مثالي horizontally وvertically داخله.