怎样才能将div里面的div居中呢?

发布网友发布时间：2022-04-25 15:18

我来回答

共11个回答

热心网友时间：2022-04-20 13:12

div里面的div居中方法：

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

即CSS代码：

body{text-align:center}

一设置：

这个时候对“#divcss”设置居中必备样式css margin
即CSS代码：

#divcss5{margin:0 auto}

二、DIV居中用法实例

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

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

body{ text-align:center}
#divcss{margin:0 auto;border:1px solid #000;width:300px;height:100px}

2、对应html代码片段：

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

3、居中案例截图

4、在线演示：

三、布局居中总结

布局居中我们需要对对象加margin:0 auto样式，当然如果不加有的浏览器会实现居中效果，但有的浏览器就不会默认是居中。为了div居中兼容各大浏览器，一定遵循以上教程方法与实施教程。

热心网友时间：2022-04-20 14:30

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
div.a {
border: 1px solid red;
width: 500px;
height: 500px;
margin: auto;
}

div.a>div.b {
position: relative;
border: 1px dashed black;
text-align: center;
margin: 50% auto;
}
</style>

</head>
<body>
<div class="a">
<div class="b">怎样才能将div里面的div居中呢？</div>
</div>
</body>
</html>

追问不对啊，div.b高度设成100px后就不居中了。

追答我不知道了，你自己看吧

热心网友时间：2022-04-20 16:04

最好的方法就是用定位：

这个是到处都通用的自适应居中，希望对你有帮助

热心网友时间：2022-04-20 17:56

想让 b类这个DIV居中。就在DIV a 这个类中添加一个属性！ text-align: center;即可。这一 a这个类DIV中的所有都会居中。当你想要靠做或者靠右的时候。就在 b这个类中写 float:left;或者float:right

热心网友时间：2022-04-20 20:04

热心网友时间：2022-04-20 22:28

.b{margin-top:50%;
margin-left:50%;}

热心网友时间：2022-04-21 01:10

div居中：
margin: 0 auto;

具体方法：

.wrap{margin:0 auto;width:960px;}
<html>
<body>
<div class="wrap">
</div>
</body>
</html>

热心网友时间：2022-04-21 04:08

这个很简单啊，有很多种方法，看什么情况，一般margin-left，margin-top就可以了
还有 vertical-align:之类的，以及用定位等等

热心网友时间：2022-04-21 07:22

class为b的DIV用绝对定位position:absolute;意思是相对于他自身的第一个父元素进行定位；然后你想水平居中还是竖直居中就自己写了,希望能帮到你！

热心网友时间：2022-04-21 10:54

没看明白，你再说明白点

热心网友时间：2022-04-21 14:42

1，要兼容哪些浏览器？
2，div的宽高都固定吗？