css设置div居中的方法：
1、text-align:center方式
HTML代码：
<div class="center">
<span class="center_text">
123
</span>
</div>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代码：
<div class="center">
<span class="center_text">
我是块级元素，我是块级元素，我给自己设了display：block
</span>
</div>css代码：
center_text{
display:block;
width:500px<br> margin：0 auto；
}这种对齐方式要求内部元素(.content_text)是块级元素，并且不能脱离文档流（如设置position:absolute）,否则无效。
3、脱离文档流的居中方式。
这种通常应用在自定义弹框当中，把背景层设置成透明灰色，内容居中显示在最前面。
HTML代码：
<div class="mask"> <div class="content"><br> 我是要居中的板块 </div> </div>
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代码：
<div class="center"> <div class="center_text"> 1111111<br> </div> </div>
css代码：
.center {
display: table;
width: 100%;
}
.center_text {
display: table-cell;
text-align: center;
vertical-align: middle;
}效果图：
5、垂直居中
行内元素的垂直居中把height和line-height的值设置成一样的即可。
示例：
HTML代码：
<div class="center"> <span class="center_text"> 我是要居中的内容<br> </span> </div>
css代码：
center{
height：40px;
line-heigth:40px;<br>}这样内部的span标签就可以居中了。
以上就是css怎么使div居中？的详细内容，更多请关注0133技术站其它相关文章！
