各类CSS居中方案

页面居中，各类元素居中是咱们开发是很常见的状况，下面就来讨论下水平居中，垂直居中以及水平加垂直居中都有哪些常见的方案。咱们的目标是对齐下面这两个div:

<div class="parent">
  <div class="child">
    DEMO
  </div>
</div>
复制代码

为了看清楚，咱们给父级一个浅灰的背景，子级一个深灰的背景，开始时咱们什么样式都不写，是下面这样的，子级会默认给父级撑满：

水平居中

text-align + inline-block

.parent{
  /* text-align会对inline的子级生效，设置为center就会水平居中 */
    text-align: center;
}

.child{
  /* display设置为inline-block子级就不会撑满父级，而是自适应内容 */
    display: inline-block;
  /* text-align会继承，child的子级也会水平居中，若是咱们想恢复默认，手动写为左对齐就好了 */
  text-align: left;
}
复制代码

table + margin

.parent2 {
}

.child2 {
  /* display设置为table，若是不指定宽度，宽度就是自适应内容 */
    display: table;
  /* display若是是table，margin auto就能够生效 */
  /* 若是没有设置display为table，margin auto不能生效*/
    margin: 0 auto;
}

/* 若是知道子元素宽度，能够直接应用margin auto */
复制代码

上面这个方法适合父级元素宽度不固定，子级元素宽度也不固定的状况。若是知道子级元素的宽度就很简单了，直接应用margin auto便可：

.parent2 {
}

.child2 {
  width: 100px;
    margin: 0 auto;
}
复制代码

absolute + transform

.parent4 {
  /* 父级设置relative好让子级absolute相对于父级定位 */
    position: relative;
}

.child4 {
    position: absolute;
  /* left 50%会让子级在正中稍微靠右一点 */
    left: 50%;
  /* translateX百分比相对的是自身，由于前面靠右了，往左挪一点 */
  /* 挪的位置恰好是自身宽的一半*/
    transform: translateX(-50%);
}
复制代码

flex + justify-content

这应该是最简单的一种方式了，直接在父级定义justify-content center就好了。

.parent5 {
    display: flex;
    justify-content: center;
}

.child5 {
}
复制代码

flex + margin

flex元素也能够支持margin auto, 因此能够这样写

.parent51 {
    display: flex;
}

.child51 {
    margin: 0 auto;
}
复制代码

垂直居中

table-cell + vertical-align

vertical-align在table-cell里面生效，因此在给父级设置table-cell，而后vertical-align设置为middle就好了。

.parent6 {
    display: table-cell;
    vertical-align: middle;
}

.child6 {
}
复制代码

absolute + transform

与水平居中相似，父级设置为relative，子级设置为absolute，top设置为50%，这样会让位置稍微偏下一点，用transform往上挪一点。

.parent7 {
    position: relative;
}

.child7 {
    position: absolute;
    top: 50%;
  /* translateY百分比也是相对于元素自身计算的 */
    transform: translateY(-50%);
}
复制代码

flex + align-items

这个应该是最简单的了，直接在父级设置flex和align-items: center;

.parent8 {
    display: flex;
    align-items: center;
}

.child8 {
}
复制代码

水平垂直居中

水平垂直居中直接将前面的水平居中和垂直居中结合起来就好了。

text-align + inline-block + table-cell + vertical-align

.parent9 {
    text-align: center;
    display: table-cell;
    vertical-align: middle;
}

.child9 {
    display: inline-block;
}
复制代码

absolute + transform

前面水平居中，垂直居中都有absoluate + transform方案，结合起来就能够水平垂直居中了：

.parent10 {
    position: relative;
}

.child10 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
复制代码

flex

又看到了咱们最喜欢的flex了，作居中不要太简单！

.parent11 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.child11 {
}
复制代码

示例代码：

github.com/dennis-jian…

文章的最后，感谢你花费宝贵的时间阅读本文，若是本文给了你一点点帮助或者启发，请不要吝啬你的赞和GitHub小星星，你的支持是做者持续创做的动力。

欢迎关注个人公众号进击的大前端第一时间获取高质量原创~

“前端进阶知识”系列文章：juejin.im/post/5e3ffc…

“前端进阶知识”系列文章源码GitHub地址： github.com/dennis-jian…