首页 > 代码库 > html中div居中的几种方法

html中div居中的几种方法

在开发过程中,很多需求需要我们居中一个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居中的几种方法