كيفية توسيط المحتوى عموديًا باستخدام CSS (طريقة بسيطة)

لنُحاذِ عناصر تصميمك عموديًا باستخدام CSS وHTML! ورغم أن كثيرين يبحثون عن هذه الطريقة، فإن التوسيط العمودي للمحتوى أصعب مما يبدو للمبتدئين. والطريقة أدناه من أبسط الطرق لتحقيق ذلك.

عرض توضيحي: كيف تحاذي المحتوى عموديًا في المنتصف باستخدام CSS

HTML

انسخ الشيفرة أدناه والصقها في مستند HTML الخاص بك.

<div class="div-outer">
    <div class="div-inner">
        <h4>Box One</h4>
        <p>Vertical Align Center</p>
    </div>
</div>
<div class="div-outer">
    <div class="div-inner">
        <h4>Box Two</h4>
        <p>Vertical Align Middle</p>
    </div>
</div>
<div class="div-outer">
    <div class="div-inner">
        <h4>Box Three</h4>
        <p>Vertical Align Center</p>
    </div>
</div>

CSS

انسخ الشيفرة أدناه والصقها في ملف CSS الخاص بك. يحتاج العنصر div الخارجي إلى القيمة نفسها لكل من min-height وline-height؛ وفي هذا المثال كلتاهما 200px.

.div-outer {
    min-height: 200px;
    line-height: 200px;
}
.div-inner {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

إذا لم تنجح هذه الشيفرة معك، فجرّب البديل أدناه.

.div-outer {
    height: 80vh;
    position: relative;
}
.div-inner {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

يمكنك تعديل ألوان الصناديق والنصوص كما تشاء. استمتع!