div css如何实现子DIV水平居中？？？

1、实现div下只有一个子div的水平居中办法如下：

continer{

height:100px;

width:100px;

background-color:aqua;

text-align: center;//内联元素，使用text-align属性，可以修改对齐方式

}

child{

display: inline;//将子div设置为内联元素

}

<div class="continer">

<div class="child">我是子div</div>

</div>

2、实现div下只有多个子div的水平居中，思路是在多个子div外面再加一个div（假设命名为inner），同时inner设置为水平居中margin：0 auto，然后将多个子div设置在同一行，同时水平居中。代码如下：

continer{

height:100px;

width:500px;

background-color:aqua;

text-align: center;

}

inner{

margin:0 auto;

text-align: center;

background-color:chartreuse

}

child{

display: inline-block;

vertical-align: top;

background-color: coral

}

<div class="continer">

<div class="inner">

<div class="child">我是子div1</div>

<div class="child">我是子div2</div>

<div class="child">我是子div3</div>

</div>

</div>

扩展资料：

使元素水平居中的几种方法：

1、如果是内联元素，比如span，img，a，input等，直接使用text-align:center

2、如果是块级元素，比如h1-h6标题元素，div，p，form，section等，方法如下：

1）父元素使用margin:0 auto

2）将块级元素设置为内联元素，使用display:inline;或者disply:inline-block;

3、使用flex布局，代码如下：

box {

display: flex;

justify-content: center; / 水平居中 /

align-items: center;     / 垂直居中 /

width: 1000px;

height: 600px;

border: 1px solid red;

}

inner {

width: 300px;

height: 200px;

background-color: red;

}

<div class="box">

<section class="inner"></section>

</div>

方法如下：

在布局一张网页时，通常网页主体框架是居中于浏览器中的。实现最外层DIV水平居中与浏览器中需要一个条件和一个设置。假如最外层DIV盒子的CSS命名为“#divcss5”,这个时候为了兼容各大浏览器实现最外层的这个盒子居中。

一条件：
这个时候对“body”设置css内容居中样式（text-align:center）

即CSS代码：body{text-align:center}

一设置：

这个时候对“#divcss5”设置居中必备样式css margin
即CSS代码：#divcss5{margin:0 auto}

为了便于观察布局居中效果，我们再对“#divcss5”加一个css边框为黑色，css宽度为300px;高度为100px样式。

最终得到DIV居中的CSS代码：

body{ text-align:center}

#divcss5{margin:0 auto;border:1px solid #000;width:300px;height:100px}

对应html代码片段：

<div id="divcss5">DIV水平居中案例</div>

居中案例截图

<div style="width:200px; height:150px; background:red; padding-top:50px;">
<div style="width:100px; height:100px; background:white; margin:0px auto"></div>
</div>有一点要注意，内部标签加margin:0px
auto即可水平居中，但是标签必须设置宽度才有效，如果内部标签需要自动伸展宽度又要水平居中，那么div不太好办到，不妨使用table来实现，举例如下：
<div style="width:200px; height:150px; background:red; padding-top:50px;">
<table border="0" cellpadding="0" cellspacing="0" style="margin:0px auto">
<tr>
<td style="height:100px; background:white;">11111</td>
</tr>
</table>
</div>

<div style="position:relative">
<div style="width:50%; height:1280px; float:left; background:#F00;"></div>
<div style="width:50%; height:1280px; float:left; background:#00F;"></div>
</div>
<div style="position:absolute; width:100%; height:auto;">
<div style="width:942px; height:1200px; margin-right:auto; margin-left:auto;">我需要居中</div>
</div>

通常设置div水平居中的方法常规的是设定好div的宽度，然后再设置div的margin
的左右边界为自动适应浏览器。但是当div设置了定位类型position之后，margin的左右属性就失效了。所以这种情况下，就需要两个div来配合实现，第一个div设定好一个区域，宽度跟浏览器一样的宽度，高度设置为自动。然后在里面再嵌入一个div，这个才是最终要实现效果的div，此时就可以按照常规的方法设置居中，如上述代码所述。

div实现水平居中只需要设置固定宽度和margin:0 auto即可，
给你2个解决方案:
1、条件是div的高度和宽度是固定的
<style type="text/css">
<!--
div1 {
position:relative;
width:600px;
height:500px;
border:1px solid #008800;
}
div2 {
position:absolute;
top:50%;
left:50%;
margin:-150px 0 0 -200px;
width:400px;
height:300px;
border:1px solid #008800;
}-->
</style>
<div class="div1">
<div class="div2">让层垂直居中</div>
</div>
其实解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。
如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于父级层的样式编写。
2、条件是div的高度和宽度是不固定的
如果div宽度不固定，那用div就有点困难了，虽然用js获取当前高宽再附加css可以解决，但是要用到js来解决问题就有点逊了；
我给你一个思路，你不妨试试table布局，table不设置宽度的情况下默认是宽度和高度都是最小化的，这样给table设置margin:0 auto就可以让这个table水平方向居中；
解决了水平居中，那就来解决垂直居中，td中的内容默认是垂直居中的，那么只要两者互相嵌套一下不就解决水平垂直居中了!
但是有一个问题，你所需要垂直居中的父级table的高度是否固定，如果父级高度固定，那么子级高度不固定也一样可以垂直居中

---