CSS之居中

  1、水平居中

1）文本、图片等行内元素的水平居中

给父元素设置text-align:center；

2）肯定宽度的块级元素的水平居中

设置margin-left:auto和margin-right:auto；

3）不肯定宽度的块级元素的水平居中（3种方法）

法一 将要居中的元素包含在table标签内，对table设置margin-left:auto和margin-right:auto。

说明：table标签自己并非块级元素，若是不给它设定宽度的话，它的宽度由内部元素的宽度“撑起”。

缺点：增长了无语义标签，加深了标签的嵌套层数。

法二 改变块级元素的display为inline，而后使用text-align:center来实现居中

优势：不用增长无语义标签，简化了标签的嵌套深度。

缺点：将块级元素变成了行内元素，会带来一些限制。由于行内元素比起块级元素缺乏一些功能。

法三 给父元素设置float，而后父元素设置position:relative和left:50%，子元素设置position:relative和left:-50%来实现水平居中。

优势：保留块级元素仍以display:block的形式显示，并且不会添加无语义标签，不增长嵌套深度。

缺点：设置了position:relative，带来必定反作用。

 

2、垂直居中

1）父元素高度不肯定的文本、图片、块级元素的垂直居中

给父元素设置相同的上下边距。

2）父元素高度肯定的单行文本的垂直居中

经过给父元素设置line-height来实现，其中line-height值和父元素的height值相同。

3）父元素高度肯定的多行文本、图片、块级元素的垂直居中

设置vertical-align:middle;

问题：只有当父元素为td或者th时，该属性才会生效，对于其余块级元素，例如div、p等，默认状况下不支持vertical-align属性。

解决办法：

在FireFox和IE8下，能够设置块级元素的display:table-cell，来激活vertical-align属性。

对于不支持display:table-cell的IE6和IE7，有两种方法。

法一 能够直接使用表格。

优势：很好的实现垂直居中效果，且不会带来任何样式上的反作用。

缺点：添加了无语义标签，并增长了嵌套深度

法二 使用特定格式的hack。父元素设置position:absolute;top:50%，子元素设置position:relative;top:-50%。

优势：没有增长无语义标签

缺点：使用了hack, 须要设置position:relative和position:absolute，带来了反作用。