html怎么div剧中,css怎么使div居中？

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

css设置div居中的方法：

1、text-align:center方式

HTML代码：

123

css代码：.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方式

HTML代码：

我是块级元素，我是块级元素，我给自己设了display：block

css代码：center_text{

display:block;

width:500px
　　margin：0 auto；

}

这种对齐方式要求内部元素(.content_text)是块级元素，并且不能脱离文档流(如设置position:absolute),否则无效。

3、脱离文档流的居中方式。

这种通常应用在自定义弹框当中，把背景层设置成透明灰色，内容居中显示在最前面。

HTML代码：

　　　　我是要居中的板块

css代码：.mask{

display: block;

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: #000;

filter: alpha(opacity=30);

-ms-filter: "alpha(opacity=30)";

opacity: .3;

z-index: 10000;

}

.center{

display: block;

position: fixed;

_position: absolute;

top: 50%;

left: 50%;

width: 666px;

height:400px;

margin-left: -333px;

margin-top: -200px;

z-index: 10001;

box-shadow: 2px 2px 4px #A0A0A0, -2px -2px 4px #A0A0A0;

background-color: #fff;

}

效果图：

这种居中方式，把内部div设置宽高之后，再设置top、left各为50%，设置完之后，这里是按照左端居中的，接着我们使用负边距的方式调整，将margin-top设置为负的高度的一半，margin-left设置为负的宽度的一半，就可以居中了。

这种方式还有一种居中方法就是设置margin：-(内部div高度的一半) auto；这用就不用设置left的值了。

4、display:table-cell

display:table-cell配合width，text-align:center,vertical-align:middle让大小不固定元素垂直居中,这个方式将要对其的元素设置成为一个td，float、absolute等属性都会影响它的实现，不响应margin属性;

示例：

HTML代码：

1111111

css代码：.center {

display: table;

width: 100%;

}

.center_text {

display: table-cell;

text-align: center;

vertical-align: middle;

}

效果图：

5、垂直居中

行内元素的垂直居中把height和line-height的值设置成一样的即可。

示例：

HTML代码：

我是要居中的内容

css代码：center{

height：40px;

line-heigth:40px;
}

这样内部的span标签就可以居中了。