                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /初识HTML(5)+CSS(3)-升级版

我想让两个div并列显示然后居中，为什么我设置了margin:10px auto却还是不能居中？

我想让两个div并列显示然后居中，为什么我设置了margin:10px auto却还是不能居中？

慕仰0359230

2020-04-10

源自：初识HTML(5)+CSS(3)-升级版 13-4

关注问题我要回答

1132

操作

收起

5 回答

Weiss3858599
2020-06-23

body{

display:flex;

justify-content: center;

}

查了下，给父元素设置FLEX布局居中可以

0 回复有任何疑惑可以回复我~

Sunly3212
2020-05-26

因为设置float后元素自动变为inline-block，不管之前是什么类型，会没有margin

0 回复有任何疑惑可以回复我~

慕无忌5565444
2020-05-25

10px 的 margin 是有显示的，只是不明显，你可以设置 200px 试试看。

对于 margin: 0 auto; 的使用，是有限制条件的，一个就是 div 得设置宽度，但是设置宽度之后又居中不了。

我的猜想是可能与 float 有关，我取消float之后，两个 div 是能居中显示的，不过就没有并列居中的效果了。

0 回复有任何疑惑可以回复我~

宝慕林3013065
2020-04-24

现在整个body没有高度，目前我所学到的使用一个外层div，设置一下宽高包裹一下就可以居中了

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>浮动模型</title>

<style type="text/css">

.div{

position: absolute;

width: 408px;

height: 400px;

right: 0;

left: 0;

top: 0;

bottom: 0;

margin:auto;

}

#div1,#div2{

border: 2px red solid;

width: 200px;

height: 400px;

float:left;

}

</style>

</head>

<body>

<div class="div">

<div id="div1">栏目1</div>

<div id="div2">栏目2</div>

</div>

</body>

</html>

1 回复有任何疑惑可以回复我~

Hewitt_Q
2020-04-10

使用了float模型，两个div会显示在同一行，所以其实已经居中了吧？（把两个div看成一个整体）

0 回复有任何疑惑可以回复我~

#1

慕仰0359230 提问者

没有居中，截图看起来像是居中了，全屏以后并没有居中，而且我设置了10PX的距离，也没有显示出来

2020-04-10 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

初识HTML(5)+CSS(3)-升级版

参与学习 1225792 人
解答问题 18234 个

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

本课相似问答

3 回答为什么我设置定高，然后之间margin: auto; 不能使它上下左右都居中呢？

3 回答div模块能够设置居中显示吗

3 回答让div居中

2 回答两个div居中

2 回答浮动模型的两个div不可以设置为居中显示的吗？

搜索更多本课相关问答

我想让两个div并列显示然后居中，为什么我设置了margin:10px auto却还是不能居中？

我要回答关注问题

意见反馈帮助中心 APP下载