css 居中问题

水平居中有text-align:center 和 margin:0 auto，前者是针对父元素进行设置而后者则是对子元素。margin:0 auto; 这里实现的前提是子元素没有float 浮动起来，不然没有效果。

垂直居中 line-height ，将其值设为等于父元素的height值，内部的文字就会自动垂直居中，仅只能是文字。

 

这个问题经常在实践中碰到总结一下经验，基本上都是从别人文章中看到的一些好的解决方法。

 

1、给父元素添加 parent:after{ content:""; display:table; clear:both}

 

2、position 实现    { width:100px; height:80px; position:absolute; top:50%;left:50%; margin-left:50px;margin-top:40px}使用这个方法的好处在于无论你是什么形式的内容都可以马上居中，而缺点就是必须对元素有确定的宽高值，通过javascript来计算。

 

 

图片的垂直上下居中分布

   parent{ position:relative;}

　child{ position:absolute; top:0; left:0; right:0; bottom:0;width:200px; height:400px; margin:auto}

 

元素竖直居中方法：

   1、单行文本或图片的竖直居中 vertical-align：middle；

   2、显示模式改为table

   3、绝对定位+margin-top:负值

   4、拉伸子元素  再配合margin：auto，见图片垂直上下居中

   5、上下相等padding