请 css 大佬帮忙看下这个居中难题，折腾了 3 个小时还没解决

2023-01-24 20:22:46 +08:00
 edis0n0

代码：


<html>
    <body>
        <div>
            <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
            <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
            <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
            <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
            <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
            <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
            <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
            <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
            <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
            <div style="display: inline-block; background: #111; width: 200px; height: 200px;"></div>
        </div>
    </body>
</html>

预期效果是 div 列表居中，但列表内容不居中（像例图中的效果，最后一行在左边）

如果直接 text-align: center ，最后一行也会被居中 如果再套一层 div 再 text-align: center ，因为一行显示不下的情况下内层 div 宽度是 100%，所以外层的 center 根本没生效，尝试了一堆 flex width:fit-content 之类的样式全都不能 trim 内层 div

2606 次点击
所在节点    程序员
23 条回复
codehz
2023-01-24 20:33:58 +08:00
一眼 display: grid
horseInBlack
2023-01-24 20:35:12 +08:00
给 list 加一个 margin:0 auto;就行了
现代 CSS 不会整就直接 flex 就行了，flex 该怎么对齐就怎么对齐，你这种情况往外面套容器 div ，容器里面继续 flex 也能重新设置对齐方式

<html>
<body>
<div class="list">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>

<style lang="">
body {
background-color: skyblue;
}

.list {
width: 500px;
margin: 0 auto;
}

.box {
display: inline-block;
background: #111;
width: 100px;
height: 100px;
}
</style>
Posuker
2023-01-24 20:38:21 +08:00
有点懵，简单写一下。

<html>
....
<body>
<div style="margin: auto; display: flex; flex-wrap: wrap; width: 1200px">
<div style="width: 200px; height:200px"></div>
<div style="width: 200px; height:200px"></div>
<div style="width: 200px; height:200px"></div>
</div>
</body>
</html>

这样出来的效果，大概符合预期
edis0n0
2023-01-24 20:40:50 +08:00
@horseInBlack @Posuker 但我这情况 list 是不固定宽度，填满自动换行的，你们的方案都要固定列表宽度
edis0n0
2023-01-24 20:43:35 +08:00
@codehz #1 在哪里用 grid 呢，内外 div 好像都不行
edis0n0
2023-01-24 20:45:16 +08:00
@horseInBlack #2 试过 div ，填满自动换行还是会导致宽度变成 100%而不是实际宽度，无法居中
edis0n0
2023-01-24 20:45:59 +08:00
@horseInBlack #6 试过 div 》 试过 flex
wenzhoou
2023-01-24 20:49:03 +08:00
https://jsfiddle.net/a2pz3d6r/

<div class="outer">
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
<div class="inner"> </div>
</div>

.outer {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
}

.inner {
display: inline-block;
background: #111;
width: 200px;
height: 100px;
margin: 10px;
}
buxudashi
2023-01-24 20:49:10 +08:00
你都固定宽度了。不能 float:left 吗？
edis0n0
2023-01-24 20:51:29 +08:00
@wenzhoou #8 你这最后一行也居中了，我需要最后一行居左，列表居中
@buxudashi #9 明显是 ***不能*** 固定列表宽度
wenzhoou
2023-01-24 20:52:47 +08:00
没看清题
codehz
2023-01-24 20:54:40 +08:00
@edis0n0 只要一层就可以了
grid
设置好列的模式
最后用 justify-content
https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
codehz
2023-01-24 21:06:52 +08:00
设置列的模式，就用 grid-template-columns: repeat(auto-fit, 100px);
100 可以换成需要的宽度
甚至还能配合 minmax 做列的宽度自适应
中间的 gap 就直接用 gap 属性
wenzhoou
2023-01-24 21:34:24 +08:00
是不是只能动用 js 大法了？ https://jsfiddle.net/Ln9r67st/
你可以试试。
Posuker
2023-01-24 22:06:35 +08:00
@edis0n0 宽度随意哈，并不需要定宽，flex-wrap: wrap 了，超出宽度就会自动换行了。
crystom
2023-01-24 22:23:09 +08:00
设置外层的宽度
otakustay
2023-01-24 22:34:52 +08:00
https://codesandbox.io/s/responsive-grid-5q3s2
类似这个么？只要把外面的容器用 flex 居下中就行？
qwq11
2023-01-24 23:00:58 +08:00
#2 就是最简单的，不过好像 margin 写反了？

<html>
<head>
<style>
#container {
margin: auto 5rem;
}
#container > div {
background: #111;
width: 200px;
height: 200px;
display: inline-block;
}
</style>
</head>
<body>
<div id="container">
<div></div>
<div></div>
<div style="width: 600px"></div>
<div></div>
<div></div>
<div style="width: 800px;"></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</body>
</html>
edis0n0
2023-01-24 23:26:43 +08:00
目前能工作的只有 14 楼 @wenzhoou 的代码，但用 js 实现这个实在不优雅，还在尝试 12 楼的

@qwq11 #18 你这个没有居中，只是左右有 5rem margin
@crystom #16 外层宽度***不固定***！！！
CYTMWIA
2023-01-25 00:36:13 +08:00
[![pStuT2Q.png]( https://s1.ax1x.com/2023/01/25/pStuT2Q.png)]( https://imgse.com/i/pStuT2Q)
可以试试`flex-wrap`参数 https://developer.mozilla.org/zh-CN/docs/Web/CSS/flex-wrap
可以做到堆叠元素（放不下就换行），但对于 方块集合 会在右边缘有空白
添加`justify-content: center;`到列表容器可以让方块堆叠后居中（但最后一行也居中了）

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/910482

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX