html中div居中的几种方法

标签：开发   文字   lock   失效   ack   fixed   text   height   分享   

在开发过程中，很多需求需要我们居中一个div，比如html文档流当中的一块div，比如弹出层内容部分这种脱离了文档流等。不同的情况有不同的居中方式，接下来就分享下一下几种常用的居中方式。

1.text-align:center。

代码：

<div class="center">
　　<span class="center_text">
	123
　　</span>
</div>

.center{
　　text-align:center;
}
center_text{
　　display:inline-block;
　　width:500px
}

这种方式可以水平居中块级元素中的行内元素，如inline，inline-block；

但是如果用来居中块级元素中的块级元素时，如div中的div，一旦内层的div有自己的宽度，这种方法就会失效。只能让里面div的文字等内容居中，而div仍然是左对齐的。

还有一种情况，当内部的元素脱离了文档流，display:absolute的情况下，不管是否是块级元素，都会居中，但是这种居中不是基于内部div的内容的，而是内部div最左端，内部div的最左端在div的中间（前提外部div设置了position:relative/absolute/fixed）；

行内元素垂直居中

2.margin:0 auto;

3.

垂直  linehight

html中div居中的几种方法

标签：开发   文字   lock   失效   ack   fixed   text   height   分享   

原文地址：http://www.cnblogs.com/zhangwenjiajessy/p/6130658.html