CSS网页制做:让网页内容居中的方法与技巧

导读：网页制做Webjx文章简介：居中一直是设计师们比较喜欢使用的一种摆放形式，不管是图片仍是文字都会被要求放在中间，水平或者垂直。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来进行一些小计算了。