有故障在部分（已更新）中垂直居中内容 [英] Having Trouble Centring Content Vertically In Sections (Updated)

问题描述

我昨天没有发布这个问题，但不认为我包括足够的信息，所以已经重写了基于以前的意见 - 歉意（我是新的在这里）所以感谢任何帮助提供。该网站不是真正有用，直到这个已经修复，所以我非常渴望得到排序！

I did post this question yesterday, but don't think I included enough info, so have re-written it based on the previous comments - apologies (I'm new here) so thanks for any help offered. The site's not really usable until this has been fixed so I'm very keen to get it sorted!

（我正在这个网站的开发人员我的技能是一个有点缺乏。）
我们的网站使用版块而不是页面。每个部分应该捕捉到用户的屏幕，每个部分的内容应该在该部分的中心。我们遇到的问题是，目前每个部分的内容在水平中心，而不是垂直，而是更接近 top 。显然，这需要基于用户的分辨率是动态的。该网站是使用HTML5，JavaScript和CSS的组合;这是当前的结构：

(I'm working with a developer on this site as my skills are a little lacking.) Our site is using sections as opposed to pages. Every section should snap to the user's screen, the content of each section should then be in the centre of that section. The problem we're having is that at the moment the content of each section is in the horizontal centre, but not the vertical, instead being closer to the top. Obviously this needs to be dynamic based on the user's resolution. The site is built using a combination of HTML5, Javascript and CSS; this is the current structure:

<section id="about1" class="panel overview " data-section-name="about">    
  <div class="aboutsectionbackground"> .................. </div> 
</section>

我们尝试了这里，但是内容移动更接近底部，如果我们尝试减少顶部财产，那么它不是垂直在中间的所有决议。你能请你建议一个方法吗？

We have tried the code featured here as previously suggested, but the content moves closer to the bottom, and if we try to reduce the 'top' property then it's not vertically in the middle for all resolutions. Can you please suggest a way around this?

.aboutsectionbackground {
  position: relative !important;
  top: 50%;
  transform: translateY(-50%) !important;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

正如我说的，任何帮助非常感谢， >

As I said, any help is greatly appreciated, thanks :)

推荐答案

在父div中使用 display：table-cell $ c> vertical-align：middle 。

use display:table-cell in the parent div, and vertical-align:middle on the child element.

这篇关于有故障在部分（已更新）中垂直居中内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！