حل CSS

الموقف: قريب العرض: كتلة ؛ أعلى: 50 ٪ ؛ الهامش أعلى: -1000px ؛ الارتفاع: 2000 بكسل ؛ محاذاة النص: المركز ؛ Line-Leight: 2000px ؛ } #طَوّق { Line-Leight: 0 ؛ } #WRAP IMG { المحاذاة الرأسية: الأوسط ؛ }

التفسير

يتم وضع #Center Div في مركز والدها بأعلى: 50 ٪ وضبط الهامش لحساب نصف ارتفاعه. يضمن ارتفاع الخط الهائل أن محتوى النص داخله (في هذه الحالة ، يبقى الطفل Div #WRAP) في الأسفل. المتصفح مع التحذير هو IE7. لذلك ، يجب أن تأتي Div #wrap الداخلية والصورة على نفس السطر:

#center {
  position: relative;
  display: block;
  top: 50%;
  margin-top: -1000px;
  height: 2000px;
  text-align: center;
  line-height: 2000px;
}
#wrap {
  line-height: 0;
}
#wrap img {
  vertical-align: middle;
}