CSS居中完全指南

字数 610阅读 290

CSS 的居中问题是一个经常被抱怨的东西。为啥居个中要这么麻烦?我觉得可能问题不在于难,而在于每次一查,有各种各样的解决方案,你选了一个,能正常地居中了,但是心里又会在想:选这个是不是最好的呢?会不会有什么问题?

各种犹豫不决?那就来创建一个决策树吧!

水平居中

  • 是inline元素或者inline-元素吗?(比如text或者links)?*
    给inline元素一个block的父元素,然后设置父元素css为**text-align:center **即可搞定。
.center-children {
  text-align: center;
}
  • 是block块元素吗?
    把一个块级元素的margin-leftmargin-right设置成auto,再给定一个固定的width,即可水平居中。一般我们会写成:margin:0 auto;
.center-me {
  margin: 0 auto;
}
  • 有多个block块级元素的话,怎么居中?
    如果你想在一行里让多个块级元素居中,你可以把这些块级元素的display设置成inline-block(同时注意设置这些元素的父级元素text-align:center),或者使用flexbox.
.inline-block-center {
  text-align: center;
}
.inline-block-center div {
  display: inline-block;
  text-align: left;
}

如果使用flexbox,直接对父元素做如下设置即可:

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

垂直居中

  • 是inline元素或者inline-元素吗?(比如text或者links)?*
    • 单行?
      1.设置相同的padding-toppadding-bottom.
      2.如果1不能使用,可以尝试将元素的line-heightheight设置成相等的值。

.link {
padding-top: 30px;
padding-bottom: 30px;
}
```

.center-text-trick {
  height: 100px;
  line-height: 100px;
  white-space: nowrap;
}
  • 多行?
  1. 设置相同的padding-toppadding-bottom.
  2. 如果1不能使用,也许text所在的元素是一个table cell,可以使用 vertical-align来处理。也可以使用flexbox.
.center-table p {
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;
}
  • 是block块元素吗?
    • 知道元素的高度。 如果你知道元素的高度,那么像下面这样就可以:
    .parent {
    position: relative;
    }
    .child {
    position: absolute;
    top: 50%;
    height: 100px;
    margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
    }
    * 不知道元素的高度。
    

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

* 你可以使用flexbox吗?

.parent {
display: flex;
flex-direction: column;
justify-content: center;
}


#### 水平垂直居中
一般结合上面两个技巧就可以做到水平和垂直居中。不过也可以分成下面这三个阵营:
* 元素有固定的宽度和高度(设置absolute,50%,50%的值配合使用负的长度和宽度值可以很好地得到跨浏览器的支持)

.parent {
position: relative;
}
.child {
width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}

* 元素没有固定的宽度和高度(在top和left上同时使用transform属性和负的translate百分数,注意这里的百分数是基于当前元素的)

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

* 可以使用flexbox吗?注意两个方向上都要设置center

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


原文链接:https://css-tricks.com/centering-css-complete-guide/

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
  • <!DOCTYPE html> 3_3HOMEWORK /*! Twitter Bootstrap //! ...
  • 在CSS中如何居中这事儿是CSS为人所抱怨的典型代表之一。“为毛它这么难?%>_<%”,开发者们抱怨道。我认为这个...
  • CSS中如何完美做到居中,一直是令前端工程师头疼的问题。最近读到CSS-TRICKS中的一篇帖子,将居中问题的解决...
  • 别人看起来残忍的 居中却不为然 温水青蛙一样 那个脉管炎的流浪汉 眼睁睁看着脚掌扔在一边 眼神中淡然 这种痛苦 就...