css 左右居中问题

Posted 2023-04-13

外边大的div宽度确定 里边有固定宽度的小div 但小div的个数不能确定 如何让这些小的div也水平居中呢？
里边的色块相当于小的div 宽度确定 但个数是不确定的 图中小的div个数为四个 也有可能是 三个 两个 或 1个 但都是让这几个小的div 水平处于居中位置 请高手帮帮忙！

margin-right: auto;
margin-left: auto;

css边界左右自动就可以了追问

这个样式写在小的div里吗？ 我试过了 这样的话这一个小div会占据一行（虽然在水平居中的位置） 我想让这几个小div水平放置 并且居中

追答

有颜色的那个小的div也不确定宽度？

参考技术A 管理员还设推荐答案，你懂不懂啊，乱推~

大div设置text-align:center
小div设置display:inline-block追问

好像还是不行... 您能写具体些吗？ 谢谢~

追答

绝对可行

大div设置宽，然后文本居中~~

小div设置宽，高，然后显示inline-block

追问

这样应该是这些小div 在大div中从左边开始排列吧 您看一下被推荐答案上的那个图 里边的色块就是小div 其实小div中 还包括两个div-图标和文字 我的意思是希望有两个色块（第二级div）的时候，两个都居中，三个的时候也都居中

追答

所以大div才设置了文本居中~~
你按我说的做~
另外别追问了，再追问就扣我分了，还有问题就写到你的补充答案中~~

参考技术B margin左右auto 参考技术C margin:0 auto;

html+css水平居中和垂直居中

水平居中 1.定宽。左右：margin：auto 2.弹性盒设置 justify—content：center 3.父元素设置 text-align：center 4相对定位元素 left：0；right：0；定宽：左右margin：auto 5.相对定位元素 margin-left：50%；transform：translateX（-50%）【margin，padding相对于包含块宽度的百分比】 垂直居中 1.line-height【单行文本垂直居中】 2.弹性盒设置 align-items：center 3.相对定位元素 top：0；bottom：0；定高：上下 margin：auto 4.相对定位元素，top：50%，transform：translateY（-50%） 相对元素水平垂直居中 position：relative； top：50% left：50% teansform：translate（-50%，-50%）