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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 662 天前的主题，其中的信息可能已经有所发展或是发生改变。

代码：


<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

23 条回复 • 2023-01-25 01:11:15 +08:00

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;`到列表容器可以让方块堆叠后居中（但最后一行也居中了）

zhengjian

2023-01-25 00:48:10 +08:00

是这个意思吗？

使用 gird 可以实现

c0t

2023-01-25 01:02:51 +08:00 via iPhone

感叹你的活好杂，上次还在问 shader 呢…

edis0n0

2023-01-25 01:11:15 +08:00

@zhengjian #21 对，就是这样的