css如何居中一个div(css设置div整体居中)-IT技术网站

css如何居中一个div

如何运用CSS让DIV居中显现，让div水平居中有哪些CSS款式呢？
需要的首要css代码有两个，一个为text-align:center（内容居中），别的一个为margin:0auto；其两个款式需要配合运用才能完成div盒子的居中显现排版。
首要咱们对body设置text-align:center，再对需要居中的div盒子设置css款式margin:0auto，这样即可让对应div水平居中。
实例讲解div居中代码应用，为了调查div居中作用，咱们对div设置一个div命名为“.div”在html中div标签内运用class=“div”,设置其宽度为400px;高度为100px，边框为赤色。以便咱们调查作用。
1、完好html+css代码
>
<html>
<head>
<metacharset=”utf-8″/>
<title>div居中在线演示www.divcss5.comtitle>
<style>
body{text-align:center}
.div{margin:0auto;width:400px;height:100px;border:1pxsolid#F00}
/*css注释：为了调查作用设置宽度边框高度等款式*/
style>
head>
<body>
<divclass=”div”>
DIVCSS5实例
div>
body>
html>
2、div+css居中实例截图
3、div居中代码应用特点
此居中办法是让div居中作用完美兼容各大渠道、兼容各大浏览器，不管高版别ie仍是高版别的ie均兼容。

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；
1.jpg
但是假如用来居中块级元素中的块级元素时，如div中的div，一旦内层的div有自己的宽度，这种办法就会失效。只能让里边div的文字等内容居中，而div仍然是左对齐的。
2.jpg
还有一种状况，当内部的元素脱离了文档流，display:absolute的状况下，不管是否是块级元素，都会居中，但是这种居中不是根据内部div的内容的，而是内部div最左端，内部div的最左端在div的中心（前提外部div设置了position:relative/absolute/fixed）；
3.jpg
2、margin:0auto办法
HTML代码：
我是块级元素，我是块级元素，我给自己设了display：block
css代码：
center_text{
display:block;
width:500px
margin：0auto；
}
这种对齐办法要求内部元素(.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:2px2px4px#A0A0A0,-2px-2px4px#A0A0A0;
background-color:#fff;
}
效果图：
4.jpg
这种居中办法，把内部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.jpg
5、垂直居中
行内元素的垂直居中把height和line-height的值设置成一样的即可。
示例：
HTML代码：
我是要居中的内容
css代码：
center{
height：40px;
line-heigth:40px;
}
这样内部的span标签就可以居中了。