垂直校准&水平对齐问题

问题描述

我试图创建一个像这样的布局，它既是水平的，也是垂直居中的。

我已经想出了一个用jQuery做这件事的方法，但似乎有一个小小的混乱该页面呈现。我希望能用纯css来做这个布局，但我似乎无法弄清楚如何去做。这是这个布局的小提琴。谢谢

解决方案

在CSS中垂直对齐和显示的组合可以解决这个问题：

  #container .item {
 display：table-cell; 
 vertical-align：middle; 
 ... 
} 
  

I am trying to create a layout like this, that is both horizontally and vertically centered.

I have figured out a way to do this with jQuery, but there seems to be a slight jerk as the page renders. I was hoping to do this layout with pure css, but I can't seem to figure out how to do it. Here is the fiddle for this layout. Thanks

http://jsfiddle.net/rodmjay/LnRq6/

解决方案

A combination of vertical align and display in your CSS will do the trick:

#container .item {
  display: table-cell;
  vertical-align: middle;
  ...
}

这篇关于垂直校准&水平对齐问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！