CSS居中整理
由于最近用到CSS居中应用，网上资料过多，然后关于居中的技巧有很多，就先总结下方便后续忘记了，好回忆查看。
关于实现
水平居中
行内元素**
1. 详情见：https://codepen.io/Sally-hzy/pen/jprOQd
width="800" height="265" scrolling="no" title="CSS -Line-level-center" src="//codepen.io/Sally-hzy/embed/jprOQd/?height=265&theme-id=0&default-tab=css,result&embed-version=2" allowfullscreen="true">See the Pen CSS -Line-level-center by Sally (@Sally-hzy) on CodePen.
2. 该方法适用于 inline、inline-block、inline-table、inline-flex 之类的元素。
块级元素
单个块级元素
1.详情见链接：https://codepen.io/Sally-hzy/pen/dZBgmb
2.不用父元素或元素如何，只要指定了宽度，该方法都适用
3.但是对浮动（float）的元素没有，可以尝试用另一种
https://codepen.io/Sally-hzy/pen/LOKgQK
width="800" height="265" scrolling="no" title="CSS-block-line-center-float" src="//codepen.io/Sally-hzy/embed/LOKgQK/?height=265&theme-id=0&default-tab=html,result&embed-version=2" allowfullscreen="true">See the Pen CSS-block-line-center-float by Sally ( @Sally-hzy) on CodePen.多个块级元素
1.并排显示，高度无要求
https://codepen.io/Sally-hzy/pen/QgYpgM
width="800" height="265" scrolling="no" title="css-block-level-more-line" src="//codepen.io/Sally-hzy/embed/QgYpgM/?height=265&theme-id=0&default-tab=html,result&embed-version=2" allowfullscreen="true">See the Pen css-block-level-more-line by Sally (@Sally-hzy) on CodePen.
2.成一行显示，高度相同
https://codepen.io/Sally-hzy/pen/YjWLQe
width="800" height="265" scrolling="no" title="CSS-block-level-center-sameheight" src="//codepen.io/Sally-hzy/embed/YjWLQe/?height=265&theme-id=0&default-tab=html,result&embed-version=2" allowfullscreen="true">See the Pen CSS-block-level-center-sameheight by Sally (@Sally-hzy) on CodePen.
3.一列显示
https://codepen.io/Sally-hzy/pen/GBqdYP
width="800" height="265" scrolling="no" title="css-block-level-inline" src="//codepen.io/Sally-hzy/embed/GBqdYP/?height=265&theme-id=0&default-tab=html,result&embed-version=2" allowfullscreen="true">See the Pen css-block-level-inline by Sally (@Sally-hzy) on CodePen.
垂直居中
行内元素
单行内容
1.通过设置 行内/文本元素相等的上下边距值可是实现单行元素的垂直居中https://codepen.io/Sally-hzy/pen/vaKjMV
width="800" height="265" scrolling="no" title="css-inline-height-inline-one" src="//codepen.io/Sally-hzy/embed/vaKjMV/?height=265&theme-id=0&default-tab=html,result&embed-version=2" allowfullscreen="true">See the Pen css-inline-height-inline-one by Sally (@Sally-hzy) on CodePen.2.但是有时候并不是设置上下边距值来实现，这时可以选择
width="800" height="265" scrolling="no" title="css-inline-height-inline-two" src="//codepen.io/Sally-hzy/embed/RBRBgo/?height=265&theme-id=0&default-tab=css,result&embed-version=2" allowfullscreen="true">See the Pen css-inline-height-inline-two by Sally (@Sally-hzy) on CodePen.
https://codepen.io/Sally-hzy/pen/RBRBgo多行内容
width="800" height="265" scrolling="no" title="css-inline-height-inling-three" src="//codepen.io/Sally-hzy/embed/vaXaVX/?height=265&theme-id=0&default-tab=css,result&embed-version=2" allowfullscreen="true">See the Pen css-inline-height-inling-three by Sally (@Sally-hzy) on CodePen.
1.对多行文本设置相等的上下边距可以实现垂直居中，一般可利用vertical-align来实现
https://codepen.io/Sally-hzy/pen/vaXaVX2.其次，还可以通过flex布局实现
https://codepen.io/Sally-hzy/pen/OwRoMQ
width="800" height="265" scrolling="no" title="css-inline-height-inline-flex" src="//codepen.io/Sally-hzy/embed/OwRoMQ/?height=265&theme-id=0&default-tab=html,result&embed-version=2" allowfullscreen="true">See the Pen css-inline-height-inline-flex by Sally (@Sally-hzy) on CodePen.
3.除此之外，还可以使用 ghost element，这种方法是将一个完整高度的伪类放在容器中
https://codepen.io/Sally-hzy/pen/KBgxYK
width="800" height="265" scrolling="no" title="css-inline-height-inline-ghost" src="//codepen.io/Sally-hzy/embed/KBgxYK/?height=265&theme-id=0&default-tab=css,result&embed-version=2" allowfullscreen="true">See the Pen css-inline-height-inline-ghost by Sally (@Sally-hzy) on CodePen.
块级元素
1.元素高度已知
（通过计算）https://codepen.io/Sally-hzy/pen/GBjYNe
width="800" height="265" scrolling="no" title="css-block-height-block-one" src="//codepen.io/Sally-hzy/embed/GBjYNe/?height=265&theme-id=0&default-tab=css,result&embed-version=2" allowfullscreen="true">See the Pen css-block-height-block-one by Sally (@Sally-hzy) on CodePen.
2.元素高度未知
该方法就是先将元素相对于其原始位置向下移动父元素高度的一半距离，再将该元素相对其本身的高度向上移动一半，这样就能实现垂直居中的效果了。
https://codepen.io/Sally-hzy/pen/KBgGRN
3.直接用flex布局的方式实现
https://codepen.io/Sally-hzy/pen/OwRBYy
width="800" height="265" scrolling="no" title="css-block-height-block-three" src="//codepen.io/Sally-hzy/embed/OwRBYy/?height=265&theme-id=0&default-tab=css,result&embed-version=2" allowfullscreen="true">See the Pen css-block-height-block-three by Sally ( @Sally-hzy) on CodePen.垂直水平居中
- 元素高度与宽度已知
将元素相对于其父元素的宽度/高度值向右并向下移动一半的距离，这时元素左上角的顶点刚好位于父元素的中心。然后再通过设置负边距值的方法，将元素相对于其自身的宽度/高度值向左并向上移动一半的距离，就可实现水平垂直均居中的效果了。并且这种方法的浏览器兼容性是很好的。
https://codepen.io/Sally-hzy/pen/vaXQmO
元素宽度或高度未知
- 如果元素的宽度或者高度未知，则在将元素相对于父元素的宽高往向右并向下移动一半距离后，再用 transform
属性来将其向左并向上移动自身宽度及高度值一般的距离即可。
https://codepen.io/Sally-hzy/pen/MBjZwx
width="800" height="265" scrolling="no" title="css-block-center-two" src="//codepen.io/Sally-hzy/embed/MBjZwx/?height=265&theme-id=0&default-tab=css,result&embed-version=2" allowfullscreen="true">See the Pen css-block-center-two by Sally ( @Sally-hzy) on CodePen.- 使用flex布局实现
https://codepen.io/Sally-hzy/pen/NBRJya
width="800" height="265" scrolling="no" title="css-block-center-three" src="//codepen.io/Sally-hzy/embed/NBRJya/?height=265&theme-id=0&default-tab=css,result&embed-version=2" allowfullscreen="true">See the Pen css-block-center-three by Sally (@Sally-hzy) on CodePen.
或者
.parent {
display: flex;
justify-content: center;
}
.child {
margin: auto 0;
}
https://codepen.io/Sally-hzy/pen/QBKoZm
width="800" height="265" scrolling="no" title="css-block-center-four" src="//codepen.io/Sally-hzy/embed/QBKoZm/?height=265&theme-id=0&default-tab=css,result&embed-version=2" allowfullscreen="true">See the Pen css-block-center-four by Sally (@Sally-hzy) on CodePen.
参考文章：
https://segmentfault.com/a/1190000005353303
https://jinlong.github.io/2013/08/13/centering-all-the-directions/
https://css-tricks.com/centering-css-complete-guide/