css中居中怎么设置 css实现居中的几种方式

等等，昨天调试那个旧项目时，突然发现一个有趣的细节。
那个用了绝对定位居中的按钮，在IE1 1 上居然有点模糊，后来加了个transform-style:preserve-3 d;就好了。
这让我想起之前用Flexbox时，某个移动端H5 页面，因为兼容性问题，居然用padding和margin组合才搞定的居中。
具体是某个电商H5 页面，大概是去年双十一那阵子修的，用的还是Vue1 .0版本，真是够了。

CSS怎么实现水平居中 水平居中布局指南

CSS居中这事儿吧，确实得看情况来整。
主要分几大类：
1 . 行内元素 比如文本、小图标这种 直接给父元素加 text-align: center 就行 css .parent { text-align: center; } 注意啊，子元素得是 inline 或 inline-block 类型才行
2 . 块级元素 比如按钮、div这种 必须先定好宽度，再加 margin: 0 auto css .child { width: 2 00px; / 必须设宽度 / margin: 0 auto; } 要是没设宽度，默认占满父元素宽度，居中就不灵光了
3 . Flexbox 现在这玩意儿用得贼多 父元素加 display: flex，再加 justify-content: center 就行 css .parent { display: flex; justify-content: center; } 要垂直居中再加 align-items: center，两下子搞定
4 . Grid 网格布局也行 css .parent { display: grid; place-items: center; } 简洁吧？
5 . 绝对定位 特殊场景用这个 比如弹窗、悬浮按钮 css .parent { position: relative; } .child { position: absolute; left: 5 0%; transform: translateX(-5 0%); } 注意 left: 5 0% 是往右偏一半，再用 translateX(-5 0%) 调回来
常见坑：
父元素没设宽度，块级元素 margin: 0 auto 就白费
Flexbox 里忘了加 display: flex
绝对定位没带 position: relative 父元素
同时用了 margin 和 width 导致计算错乱
例子：
导航栏链接居中：给 nav 父元素加 text-align: center
响应式图片：用 display: flex 最省事
表单居中：块级表单直接 margin: 0 auto，复杂点用 Flexbox
反正就这些，具体用啥得看场景。

css flexbox如何实现水平居中

哎哟，你问我Flexbox的水平居中，这事儿我可是有经验。
记得有一次，我接了一个项目，客户要求页面上的几个导航按钮要水平居中显示。
那时候我还在用Flexbox的新鲜劲儿，想着这还不简单，直接在父容器上设置个justify-content: center不就搞定了？
当时我就在那写代码，.nav-container { display: flex; justify-content: center; }，结果一看页面，导航按钮就在中间了，那叫一个顺眼。
不过，后来我又发现，如果我想让其中一个按钮单独居中，而不是和别的按钮一起，那可就有点儿麻烦了。

我就试了试给那个单独居中的按钮设置margin: 0 auto;，嘿，还真管用。
不过那时候我还不知道，这其实是利用了Flexbox的自动外边距分配特性。

再后来，我遇到一个项目，客户说页面布局要响应式，不同屏幕大小都要好看。
那时候我才意识到Flexbox的响应式设计有多强大，不用写那么多媒体查询，直接用Flexbox就能搞定。

不过说回来，Flexbox虽然强大，但兼容性也是个问题。
记得有一次给一个老客户做网站，用的还是IE1 0，那时候我才知道，Flexbox在IE1 0以下版本需要加前缀。
那会儿我可是花了不少时间去研究兼容性问题呢。

哎，说起来Flexbox和Grid，这俩东西各有各的优势。
Grid更适合同时控制水平和垂直居中，但Flexbox在单轴对齐上更灵活。
我之前有个项目，就是同时用到Grid和Flexbox，感觉挺有意思的。

总之，Flexbox的水平居中是个好东西，用起来方便，效果也不错。
不过，兼容性和响应式设计还是要多注意一下。
哈哈，当年我可是踩了不少坑呢！