كيفية توسيط المحتوى عموديًا بارتفاع متغير داخل div؟

Question

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

Answer 1

فقط اضف

position: relative;
top: 50%;
transform: translateY(-50%);

إلى القسم الداخلي.

ما يفعله هو تحريك الحد العلوي للقسم الداخلي إلى نصف ارتفاع القسم الخارجي (top: 50%;) ثم القسم الداخلي يصل إلى نصف ارتفاعه (transform: translateY(-50%)).هذا سوف يعمل مع position: absolute أو relative.

لا تنسى transform و translate تحتوي على بادئات البائع التي لم يتم تضمينها من أجل البساطة.

قلم التشفير: http://codepen.io/anon/pen/ZYprdb

Answer 2

يبدو أن هذا هو أفضل حل وجدته لهذه المشكلة، طالما أن متصفحك يدعم ::before العنصر الزائف: حيل CSS:التمركز في المجهول.

لا يتطلب أي علامات إضافية ويبدو أنه يعمل بشكل جيد للغاية.لم أتمكن من استخدام display: table طريقة لأن table العناصر لا تطيع max-height ملكية.

.block {
  height: 300px;
  text-align: center;
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;
  margin: 20px;
}

.block::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */

  /* For visualization 
  background: #808080; width: 5px;
  */
}

.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
}

<div class="block">
    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my
           shoulder, said&mdash;"Did ye see anything looking like men going
           towards that ship a while ago?"</p>
    </div>
</div>

Answer 3

هذا شيء كنت بحاجة إلى القيام به عدة مرات ولا يزال الحل الثابت يتطلب منك إضافة القليل من العلامات غير الدلالية وبعض الاختراقات الخاصة بالمتصفح.عندما نحصل على دعم المتصفح لـ CSS 3، ستحصل على التوسيط العمودي الخاص بك دون أي خطيئة.

للحصول على شرح أفضل للتقنية يمكنك البحث المقالة التي قمت بتعديلها منها, ، ولكنه يتضمن في الأساس إضافة عنصر إضافي وتطبيق أنماط مختلفة في IE والمتصفحات التي تدعمها position:table\table-cell على العناصر غير الجدولية.

<div class="valign-outer">
    <div class="valign-middle">
        <div class="valign-inner">
            Excuse me. What did you sleep in your clothes again last night. Really. You're gonna be in the car with her. Hey, not too early I sleep in on Saturday. Oh, McFly, your shoe's untied. Don't be so gullible, McFly. You got the place fixed up nice, McFly. I have you're car towed all the way to your house and all you've got for me is light beer. What are you looking at, butthead. Say hi to your mom for me.
        </div>
    </div>
</div>

<style>
    /* Non-structural styling */
    .valign-outer { height: 400px; border: 1px solid red; }
    .valign-inner { border: 1px solid blue; }
</style>

<!--[if lte IE 7]>
<style>
    /* For IE7 and earlier */
    .valign-outer { position: relative; overflow: hidden; }
    .valign-middle { position: absolute; top: 50%; }
    .valign-inner { position: relative; top: -50% }
</style>
<![endif]-->
<!--[if gt IE 7]> -->
<style>
    /* For other browsers */
    .valign-outer { position: static; display: table; overflow: hidden; }
    .valign-middle { position: static; display: table-cell; vertical-align: middle; width: 100%; }
</style>

هناك العديد من الطرق (الاختراقات) لتطبيق الأنماط في مجموعات محددة من المتصفحات.لقد استخدمت التعليقات الشرطية ولكن أنظر إلى المقالة المرتبطة أعلاه لرؤية تقنيتين أخريين.

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

تحديث: لقد بدأنا في الحصول على دعم أفضل للمتصفح لـ CSS3، حيث جلبنا كلاً من flex-box والتحويلات كطرق بديلة للحصول على التمركز العمودي (من بين تأثيرات أخرى).يرى هذا السؤال الآخر لمزيد من المعلومات حول الأساليب الحديثة، ولكن ضع في اعتبارك أن دعم المتصفح لا يزال غير واضح بالنسبة لـ CSS3.

Answer 4

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

.contentCentered {
  text-align: center;
}

.contentCentered::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -.25em; /* Adjusts for spacing */
}

.contentCentered > * {
  display: inline-block;
  vertical-align: middle;
}

<div class="contentCentered">
  <div>
    <h1>Some text</h1>
    <p>But he stole up to us again, and suddenly clapping his hand on my
      shoulder, said&mdash;"Did ye see anything looking like men going
      towards that ship a while ago?"</p>
  </div>
</div>

قلم كود متشعب: http://codepen.io/dougli/pen/Eeysg

Answer 5

أفضل نتيجة بالنسبة لي حتى الآن:

div المراد توسيطه:

position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
right: 0;
left: 0;

Answer 6

يمكنك استخدام الهامش التلقائي.مع flex، يبدو أن div يتم توسيطه عموديًا أيضًا.

body,
html {
  height: 100%;
  margin: 0;
}
.site {
  height: 100%;
  display: flex;
}
.site .box {
  background: #0ff;
  max-width: 20vw;
  margin: auto;
}

<div class="site">
  <div class="box">
    <h1>blabla</h1>
    <p>blabla</p>
    <p>blablabla</p>
    <p>lbibdfvkdlvfdks</p>
  </div>
</div>

Answer 7

هذا هو الحل الرائع الخاص بي لـ div مع ارتفاع ديناميكي (نسبة مئوية).

CSS

.vertical_placer{
  background:red;
  position:absolute; 
  height:43%; 
  width:100%;
  display: table;
}

.inner_placer{  
  display: table-cell;
  vertical-align: middle;
  text-align:center;
}

.inner_placer svg{
  position:relative;
  color:#fff;
  background:blue;
  width:30%;
  min-height:20px;
  max-height:60px;
  height:20%;
}

لغة البرمجة

<div class="footer">
    <div class="vertical_placer">
        <div class="inner_placer">
            <svg> some Text here</svg>
        </div>
    </div>
</div>  

جرب هذا بنفسك.