css 里面怎么让一个DIV居中 ?

第一种方式：设置body 居中。在CSS中的代码是（body{text-align:center;}）
第二种方式：用盒子模型，首先设置一个Div ，这个DIV的宽度为100%，然后在这个DIV居中，那么在这个DIV中加的内容就居中显示，代码如下：
<div class="div1">
<div class="div2"></div>
</div>
CSS 样式代码：
<style type="text/css">
div1{text-align:center;width:100%;}
div2{width:980px;background:red;} //为了看清效果，加了背景颜色
</style>
第三种方式：margin：0 auto；

通常的方法为：先设置div的宽度，然后使用如下样式：

1margin: 10px auto; / 上下边距10px，左右边距自动以达到左右居中的目的/

以下为示例：

HTML代码中给出div

123   <div class="outer">    <div class="content"></div></div>   

添加样式

1234567   /外层边框/divouter{width:200px;height:150px;border:1px solid green;}divcontent{    width:100px;height:50px; /设置大小/    margin:20px auto;        /设置左右边距自动以使其居中/    border:1px solid red;}   

显示效果

CSS实现div垂直居中的方法有很多，下面div居中的几种方法是自己平时写网页中经常用到的，最常见的例子就是登录注册d出框。

方法一：对div使用绝对布局position:absolute;并设置top，left，right，bottom的值相等，但不一定都等于0；并且设置margin:auto。

方法二：这个方法要知道div的宽度和高度。对div使用绝对布局position:absolute;并把top和left的值都设置为50%；50%就是指页面窗口的宽度和高度的50%；最后将div左移和上移，左移和上移的大小为div宽度和高度的一半。

其中 margin-left：-100px 和 margin-top：-100px 可以写成 margin：-100px  0px  0px  -100px

方法三：div使用绝对定位position：absolute，并且设置left和top的值都为50%。使用css3的transform属性。transform：translate（-50%，-50%）。

以上3种方法的效果如下显示
若有两个div，里面小的div相对于外面大的div水平垂直居中对齐，有以下几种方法。

方法一：利用position和margin：auto实现。父元素设置position：relative；子元素设置position：absolute，并设置top，left，right，bottom值相等。

方法二：使用position。父元素设置position：relative；子元素设置position：absolute。并设置top和left为50%，并设置左移和上移为子元素的大小的一半。

方法三：使用display：flex。这种方法需要设置浏览器的兼容性。

方法四：使用transform：translate（）。父元素设置position：relative；子元素设置position：absolute。并设置top和left为50%。最后设置transform：translate（-50%，-50%）。

以上四种方法的效果图如下显示

今天就跟大家分享这么多~如果你有更好的方法，请在下方留言

有以下办法可以使div层在网页中居中显示：

1、定位法，如果子级div有定义宽和高的话就可以用这个方法，注意margintop和marginleft的值均为高和宽值的一半；

2、marginauto法，这个也可以是定位法，用这个方法要求子级div必须设置宽的值，marginauto是水平垂直都居中，如果仅仅设置水平居中，可设置为marginauto0，同理，如果仅仅设置垂直居中，可设置为margin0auto；

3、displaytablecell法，这个方法主要针对多行文字内容的垂直居中对齐，注意textaligncenter设置了文字的水平居中对齐，verticalalignmiddle设置的是垂直居中对齐。

水平居中可以使用margin:0px auto;实现（盒子需要定义宽度）；
垂直居中有一下四种方式：
方法1：
parent {
width:800px;
height:500px;
border:2px solid #000;
position:relative;
}
child {
width:200px;
height:200px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background-color: red;
}

方法2：
parent {
width:800px;
height:500px;
border:2px solid #000;
display:table-cell;
vertical-align:middle;
text-align: center;
}
child {
width:200px;
height:200px;
display:inline-block;
background-color: red;
}
方法3：
parent {
width:800px;
height:500px;
border:2px solid #000;
display:flex;
justify-content:center;
align-items:center;
}
child {
width:200px;
height:200px;
background-color: red;
}
方法4：
parent {
width:800px;
height:500px;
border:2px solid #000;
position:relative;
}
child {
width:300px;
height:200px;
margin:auto;
position:absolute;/设定水平和垂直偏移父元素的50%，再根据实际长度将子元素上左挪回一半大小/
left:50%;
top:50%;
margin-left: -150px;
margin-top:-100px;
background-color: red;
}

HTML中可以设置文字或内容居中对齐。下面，我们来看看怎样让DIV中的内容居中吧。

01

随便写上文字
先打开visual studio软件，然后在div中随意写上文字，如下图所示：

02

水平居中代码
然后在style中写上水平居中代码body{text-align: center;}，如下图所示：

03

div内容居中对齐的代码，text-align:center;如下图所示：

04

预览效果
然后在浏览器中预览效果，如下图所示：

如果是需要DIV在页面或所在的父级容器中居中，你可以参考尝试以下代码

<style>
a {
width:200px;
height:150px;
background:#333;
margin:20px auto; //水平外边距自动，达到居中目的
</style>
<div class="a"> </div>

以下为让div显示在浏览器正中间的样式
<style
type="text/css">
#centerdiv
{
position:absolute;
<!--这个属性是设置div以绝对位置显示-->
top:50%;
<!--在离顶部50%的位置显示-->
left:50%;
<!--在离左边50%的位置显示-->
margin:-150px
0
0
-100px;
<!--这个设置大家开始一看，可能觉得好像不是很明白，在下面为大家详细讲解-->
width:300px;
height:200px;
background:black;
}
</style>

相信大家最不明白就是在margin:-150px
0
0
-100这个属性上面，在不设置这个属性的时候,这个div的x坐标为内容显示部分的50%，y坐标为内容显示部分的50%，显示出来的然而这样的话只能说这个div的起点是在正中间，我们需要的是将整个div显示在正中间,所以给margin-left:-150px;(这里的150是从width属性中得来的它是等于width的一半,对应的margin-top也是通过通样的方法得来的。)这样就会把整个div的宽度分一半到左边就可以让其水平居中了，在设置margin-top:-100px;是同样的道理，会将整个div的高度分一半到上面显示。就形成了整个div在浏览器的正中间显示。

---