用CSS网站设计时让网页内容居中的办法

居中一直是设计师们比较喜欢用的一种摆设形式，无论是图片还是文字都会被需要放在中间，水平或者垂直。css提供了不少便捷的让内容居中的办法给大家用，以下罗列那些最长被用的居中方法。

水平居中的text-align:center 和 margin:0 auto

这两种办法都是用来水平居中的，前者是针对父元素进行设置而后者则是对子元素。他们起用途的最重要条件是子元素需要没被float影响，不然所有都是无用功。margin:0 auto也可以被写成margin:0 auto 0 auto。不可以理解的童鞋们可以自己去找找关于css缩写的内容。

垂直居中的line-height

什么？！margin在垂直居中里不起用途了？显然事情确实这样，大家仅有margin:0 auto的使用方法而没auto 0的状况。至于line-height，他也是用途在父元素上，当他的值等于父元素的height值时，内部的文字就会自动的垂直居中了。此处仿佛仅仅只能是文字而已。

万能的position大法

这个办法可以说真的是万能的。当你为一个元素没办法居中而困扰的时候，可以果断的用法他，而且几乎没后遗症，肯定是前端工程师们居家旅游应具备的方法之一。

具体的做法非常简单，第一给父元素写上positon:relative，这么做是为了给子元素打上position:absolute的时候不会被定位到外太空去。接下去，写上子元素的height和width，这个好像是需要的，某些浏览器在分析的时候假如没这2个值的话会出现意料之外的错位。接着就是整个办法的核心，给子元素再打上TOP:50%;left:50%与margin-TOP:一半的height值的的负数;margin- left:一半的weight值的负数。整理一下之后，可能你会给你的子元素写上如此的css（当然，父元素也要先写上width和height）{width:100px;height:80px;position:absolute;TOP:50%;left:50%;margin-left:50px;margin-TOP:40px} 接下去就刷新页面吧，你的子元素已经是居中显示了。

用这个办法有哪些好处在于无论你是什么形式的内容都可以立刻居中，而缺点就是需要对元素有确定的宽高值，不然的话可能就需要通过javascript来进行一些小计算了。

目前文章用CSS网站设计时让网页内容居中的办法