CSS居中实现

文字居中，文字垂直居中水平居中，图片居中，图片水平居中垂直居中，块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的。情况有很多种，不同的情况又有不同的解决方式。水平居中的方式解决的时候相对来说通过css比较容易设置，垂直居中相对比较棘手。   先来说一下水平居中的不同情况与不同解决方法吧。 

  1 文本：

图片等行内元素的水平居中方法呢比较简单。直接给父元素设置一个text-align:centent属性就可以实现元素的水平居中了。 

  2 确定宽度的块级元素水平居中：

设置方法也不难，可以通过设置外边距，margin：0 auto;这句来实现确定宽度的块级元素水平居中。   

  3 不确定宽度的块级元素设置水平居中：

   这里介绍三种方法给大家： 

  第一种方法：使用table作为容器的方法来实现。当然不大推荐使用这种方法，因为添加了无意义的标签。这里就稍微介绍一下吧。Table标签本身并不是块级元素，当我们不设置table的宽度的话，他里面的宽度是由他内部元素的宽度撑起来的。但即使我们没有设置table的宽度，直接设置table的外边距margin：0 auto;就可以实现水平居中了!这样我们就可以通过设置table水平居中，间接使里面的内容居中。 

    第二种方法：这个思路是这样的，通过改变块级元素的display属性值为inline类型，然后设置text-align:center来实现居中。这种方法也有一定不妥之处就是把块级元素改为行内元素后，行内元素比块元素少了一些功能。比如说设定长宽值等，在项目运用中可能会有一些限制，大家可以自行选择。 相对于用table的方法的好处是不用增加无语义标签，简化标签嵌套深度。

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素，此元素前后会带有换行符。
inline	默认。此元素会被显示为内联元素，元素前后没有换行符。

例：

p.inline
  {
  display:inline;
  }

  第三种方法。通过给父元素设置浮动float，再设置父元素的position属性为relative和left：50%;子元素设置position：relative和left：-50%来实现水平居中。这个好处是可以保留块级元素仍然是以display：block的形式显示，不会添加无意义的标签，不添加嵌套深度。缺点是设置了position：relative;带来了一些副作用。下面是第三种方法的实例代码，放到body标签里面就可以了。 

<div style=”width:400px;height:300px;background:#333;”> 

<ul style=”margin:0 auto;  float:left;  position:relative; left:50%;list-style:none; padding:0;”> 

<li style=”position:relative; left:-50%;float:left”>OKOKOKOKKOOKK</li> 

</ul> 

</div> 

  三种方法使用都比较广泛，都有缺点和优点。具体选择哪种方法可视情况而定。Css文字图片块元素水平居中的方法就介绍到这里。

同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋，下面让我们先来看一下CSS中常见的几种让元素水平居中显示的方法。

　　CSS常见的让元素水平居中显示方法

　　1.使用自动外边距实现居中

　　CSS中首选的让元素水平居中的方法就是使用margin属性—将元素的margin-left和margin-right属性设置为auto即可。在实际使用中，我们可以为这些需要居中的元素创建一个起容器作用的div。需要特别注意的一点就是，必须为该容器指定宽度：


　　div#container{ margin-left:auto; margin-right:auto; width:168px; }


　　在大多数主流浏览器中，这种方法都非常有效，即使是Windows平台上的IE6，在其标准兼容模式(compliancemode)下也能够正常显示。但不幸的是，在更低版本的IE中，这种设置却并不能实现居中效果。所以若想在实际项目中使用这种方法，那么就要确保用户的IE浏览器版本不低于6.0。


　　尽管在支持上不尽如人意，但大多数设计师都建议尽可能地使用这种方法。该方法也被认为是在各种用CSS实现元素水平居中方法中最正确、最合理的一种。

　　2.使用text-align实现居中

　　另一种实现元素居中的方法是使用text-align属性，将该属性值设置为center并应用到body元素上即可。这种做法是彻头彻尾的hack，但它却能兼容大多数浏览器，所以在某些情况下也自然必不可少。


　　之所以说它是hack，是因为这种方法并没有将文本属性应用到文本上，而是应用到了作为容器的元素上。这也给我们带来了额外的工作。在创建好布局必须的div之后，我们要按照如下代码为body应用text-align属性：


　　body{ text-align:center; }


　　之后会出现什么问题吗?body的所有子孙元素都会被居中显示。


　　因此，我们就需要用再写一条规则，让其中的文本回到默认的居左对齐：


　　p{ text-align:left; }


　　可以想象这条附加的规则将带来一些不便。另外，真正完全遵循标准的浏览器并不会改变容器的位置，而只会让其中的文字居中显示。

　　3.组合使用自动外边距和文本对齐

　　因为文本对齐居中方式有着良好的向下兼容性，且自动外边距方式也被大多数当代浏览器支持，所以很多设计师将二者组合起来使用，以期让居中效果得到最大限度的跨浏览器支持：


　　body{ text-align:center; } #container{ margin-left:auto; margin-right:auto; border:1px solid red; width:168px; text-align:left }


　　可是这始终是个hack，无论如何也算不上完美。我们还是需要为居中容器中的文本编写附加的规则，但至少在各个浏览器中看起来都不错。

　　4.负外边距解决方案

　　负外边距解决方案远不是仅仅为元素添加负外边距这么简单。这种方法需要同时使用绝对定位和负外边距两种技巧。


　　下面是该方案的具体实现方法。首先，创建一个包含居中元素的容器，然后将其绝对定位于相对页面左边边缘50%的位置。这样，该容器的左外边距将从页面50%宽度的位置开始算起。


　　然后，将容器的左外边距值设置为负的容器宽度的一半。这样即可将该容器固定在页面水平方向的中点。


　　#container{ background:#ffc url(mid.jpg) repeat-y center; position:absolute; left:50%; width:760px; margin-left:-380px; }


　　看，没有任何hack!虽然这并不是首选的解决方案，但也是个不错的方法，且适用性极广—甚至在NetscapeNavigator4.x中都没有任何问题，很令人吃惊，不是吗?所以若想得到最广泛的浏览器支持，那么这种方法将会是最好的选择。