CSS的居中问题

我觉得有必要总结一下CSS中的一些问题，写博客也是锻炼自己能力的一种形式吧。 这一篇是在CSS-TRICKS 看到的一篇关于CSS垂直和水平方向居中的完整指导···

完整链接：https://css-tricks.com/centering-css-complete-guide/

为什么大家很多时候都抱怨CSS居中很困难？ 其实并不是它有多困难，而是它有太多方法可以实现，在特定的情形下选择合适的居中方法并不容易。

一、水平居中

1.1 如果是行内元素 （文本或者links）

可以直接使用

text-align: center

注意的是 这个只能用在该行内元素的父块元素上，  对于 inline , inline-block  , inline-table, inline-flex.

1.2 如果是块元素

如果该块元素已经有了width， 对margin-left 和 margin-right 设置 auto 即可

最常见的应该就是

margin：0 auto;

值得注意的是 如果一个块元素是浮动的，你无法直接设置他为居中。

1.3 多个块元素

多个块元素排成一列 可以设置它们  display: inline-block;

如果它们的父元素为 .main     

直接设置

.main { text-align: center }

此时的三个元素的height 为因为内容不同 而不同。

如果设置为

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

三个块元素的 height 会设为等高···  这也是CSS3 新增的属性吧。

二、垂直居中

2.1 行内元素

2.1.1 单行

      可以设置padding-top 和 padding-bottom 相同 则可达到目标， 如果你不想用padding, 可以使用 line-height

让 line-height 和 height 相同即可，在《CSS权威指南》中发现还有行间距和行内框这个东西，line-height - font-size 

再除以2 即为两端行间距····

2.1.2 多行

    padding 仍然适用， 不过如果不想用这个的话 还有其他办法。  第一个办法 可以把它放在一个 table  中，设置为在一行一列中。 

vertical-lign 也可以   让父元素 display: table;   再让p元素 display: table-cell.   

vertical-align:middle;

如果这个仍然不行，则可以适用FlexBox 

父元素

 display: flex;
 justify-content: center;
 flex-direction:column;

这个只适用于有固定高度的元素。 如果还不行，可以使用鬼元素···  这个主要是应用伪类元素替换容器的内侧

.ghost-center {
  position: relative;
}
.ghost-center::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}
.ghost-center p {
  display: inline-block;
  vertical-align: middle;
}

2.2 块元素

2.2.1 如果已知道元素高度

.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; */
}

父元素使用相对定位，子块元素用绝对定位时以父元素为基准， top:50%   此时字块元素左上顶点已到 父元素的中心， 再margin：(-height/2)  ，则会让子元素中心和父元素中心对齐。不过要注意考虑padding 和 border 的值，这会影响元素的总高度。

2.2.2 如果不知元素高度

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

transform   是CSS的新属性，原理和上面一样····

2.2.3 如果可以适用flexbox

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

嗯， 又是CSS3中的， 所有还是得好好学一下CSS3啊··


三、垂直和水平一起居中

3.1 如果元素有固定的宽度和高度

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

原理同上一样，只是多加了一个水平方向的···

3.2 如果不知道元素的具体宽度和高度值

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

同上，使用了CSS3的 translate属性

3.3 如果可以适用Flexbox 

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

四： 总结

你现在可以完全让元素居中了！