CSS | DIV 水平和竖直方向居中

1.竖直方向:

最近做个小页面遇到了点麻烦:需要设置元素的竖直方向居中。

以往的经验:

display: inline-block;
vertical-align: middle;

就可以解决。但是这次不行,很奇怪,不知道是高度变化的原因,还是用jquerymobile的问题,或者因为div嵌套在li 和 a 之间的问题。

解决办法:

table-cell 法:

Content goes here

CSS:

#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}

参考:

1. http://blog.themeforest.net/tutorials/vertical-centering-with-css/

2. http://blog.jobbole.com/46574/


2.水平方向:

常规做法:

test

CSS:

#parent{text-align:center;}
.child{margin:0 auto;}

即可。

不能水平居中的解决办法:http://blog.csdn.net/gxp_java/article/details/8675559

你可能感兴趣的:(HTML/CSS)