racte margin 居中 失效_总结下CSS水平居中的方法

自从用了flex以后就很少再研究布局问题了，不过最近在上网课，又复习了很多居中的小技巧，在这里总结下。

首先说说水平居中：

1. 文本居中

这是最简单的居中方式，只需要在父元素设置text-align:center即可

CSS:

.

HTML:

<

最终效果：

这个方法适合做标题栏。

虽然是文本居中，但实际上指的是子元素中的行内元素居中，那么行内元素除了上面的文本，还可以是行内块级元素，文本不能指定固定宽高，行内块级元素能指定宽高，这样我们就可以实现行内块级元素居中。

保持上面的CSS不动，修改html如下

<div class="container1">
    <div style="display: inline-block; width:100px; height: 50px; background:green"></div>
  </div>

最终效果：

但缺点是，子元素会继承父元素的text-align，所以在子元素中要记得消除这个属性。

---

2. 块级元素居中

这要分是否是固定宽度，如果是元素固定宽度的话，我们可以使用margin来达到居中的目的。

.

HTML代码如下：

<

最终效果：

那么他的缺点也很明显，就是必须指定苦丁宽度才能配合margin:auto达到居中，所以宽度不能自适应内容。

如果宽度是由子元素决定的，即父元素宽度不确定，由子元素内容撑开。那么我们可以使用absolute布局来达到居中的目的。

由于absolute元素可以在父元素内通过上下左右的距离来自由移动，我们的思想是：先让元素的左侧距离父元素的50%处，此时元素最左侧和父元素的中心对齐，那么元素是偏右的，我们必须要让子元素的中心与父元素的中心对齐，我们需要让元素向左平移自身一半，由于元素自身宽度不确定，所以不能写死，我们需要使用translate来平移，因为translate中的百分比总是基于自身。

CSS代码：

.

HTML:

<

最终效果：

但是我们发现，我需要在父元素container身上设置一个高度，比如100px，这是为什么的？

因为我们使用absolute后，该元素会脱离父元素，你可以想象成从父元素体内飞离出来，悬浮在父元素上方，父元素不能包裹该元素，从而该元素不能将父元素撑开，所以就导致父元素不设置高度的话，高度将为0，就不能自适应了。同样水平方向也是。这也是此方法的缺点。

---

那么上述方法或多或少都有这个那个问题，有什么事完美的吗？

当然必须有了，那就是flex布局，flex真是最伟大的一个css属性，真的是解决了太多的痛点了。

下面我们来看看使用flex有多么的简单。

首先当我们对父元素应用flex后，并设置一个flex主方向（flex-direction，默认水平）后，子元素的宽度将变为包裹内容或者已经设置死的宽度。而且子元素float,absolute,fixed将失效

什么叫包裹内容，即宽度是子元素撑开的宽度，大家知道，默认情况下，块级元素div宽度可是100%父元素的宽度哦。

然后我们有两种方法：

方法一：针对父元素设置 justify-content: center;

CSS:

.container4 {
      display: flex;
      justify-content: center; /* 调整flex主方向上子元素的位置 */
 }

.flex-center-in-parent {
      background-color: lightblue;
      height: 50px;
}

HTML:

<

最终效果：

而且此时子元素既可以是固定宽度，又可以是不固定宽度，无论怎样都能居中。

更棒的是父元素高度能被子元素撑开，父元素高度也能自适应了。

即便子元素有多个，也会乖乖向中心靠拢哦！

方法二：父元素不动，子元素设置margin:auto：

CSS:

.

HTML:

<

最终效果：

这样我们也达到了和方法一同样的效果。

但是多个元素会怎样呢？

经过我的观察，原来margin：auto指的是在剩余空间中居中，由于上述父元素只有一个子元素，剩余空间刚好是父元素宽度，才造成了在父元素居中的“障眼法”，但是当子元素不止一个可就不一样咯，比如下面：

毕竟我们使用flex布局，就必须时时刻刻与“剩余空间”打交道，或是居中，或是填满，又或者空间不够如何收缩等等。

使用flex是最好的布局方法，如果非要说缺点呢？我只能想到不兼容IE，不过现在谁还兼容IE啊，何必那精力和人力，不值得。

好了，今天就总结到这里了，希望对大家有帮助。其实还有一些方法能够水平居中，比如table,grid等，这里就不再多赘述了，毕竟方法万千，选一个适合自己的才是最重要的。如果本文有说错的地方，还请多多指正。喜欢记得点赞哦。