还不会CSS水平垂直居中？这里有12种方案
Posted 前端向朔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了还不会CSS水平垂直居中？这里有12种方案相关的知识，希望对你有一定的参考价值。
文章目录
CSS水平垂直居中
今天读书的时候，愕然发现自己居然没有总结过水平垂直居中的方法，在印象中，这个知识点确实是很神奇的存在：
- 极其常见的需求
- 从理论上来看，它似乎极其简单
- 在实践中，它往往难如登天，当涉及尺寸不固定的元素时尤其如此
接下来我们就来总结一下该如何实现这个看似简单，实现起来却很难，但实现方法超级多的需求吧。
水平居中
行内元素（text-align）
行内元素只需要在父元素设置水平居中就可以达到目的，也包含了img、 inline或者inline-block、inline-table和inline-flex等元素。
.container
text-align:center;
块状元素（margin）
.center
margin: 0 auto;
多个块状元素
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
方案一：
.container
font-size: 0; //解决多个行内元素之间的间隙
text-align: center;
.item
display: inline-block;
方案二：
.container
display: flex;
justify-content:center;
水平垂直居中
单行文本垂直居中
<div id="parent">
<div id="child">Text here</div>
</div>
#child
line-height: 200px; //行高和父元素高度大小相同即可
单张图片居中
<div id="parent">
<img src="image.png" alt="" />
</div>
#parent
line-height: 200px;
#parent img
vertical-align: middle;
利用表格特性居中
表格具有天然的居中效果，所以我们可以将元素模拟成表格特性，或直接用表格布局
<div id="parent">
<div id="child">Content here</div>
</div>
#parent display: table;
#child
display: table-cell;
vertical-align: middle;
基于绝对定位的解决方案
方案一
利用绝对定位，将元素的top和left属性都设为50%，再利用margin边距，将元素回拉它本身高宽的一半，实现垂直居中。
#container
position:relative;
#center
position:absolute;
top:50%;
left:50%;
width:100px;
height:100px;
margin:-50px 0 0 -50px;
方案二
用 transform 代替 margin ，这种方案有可能造成模糊，可以通过 transform- style: preserve-3d 来修复。
#container
position:relative;
#center
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
方案三
借助强大的 calc() 函数演变
#container
position:relative;
#center
position:absolute;
top:calc(50%-50px);
left:calc(50%-50px);
width:100px;
height:100px;
方案四
利用 margin 的效果
#container
position:relative;
#center
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
width:100px;
height:100px;
margin:auto;
基于视口单位的解决方案
不用绝对定位，通过视口单位来解决
main
width: 18em;
padding: 1em 1.5em;
margin: 50vh auto 0;
transform: translateY(-50%);
基于 Flexbox 的解决方案
先给这个待居中元素的父元素设置 display:flex （在这个例子中是 <body> 元素），再给这个元素自身设置我们再熟悉不过的 margin: auto （在这个例子中是 <main> 元素）：
body
display: flex;
min-height: 100vh;
margin: 0;
main
margin: auto;
请注意，当我们使用 Flexbox 时， margin: auto 不仅在水平方向上将元素居中，垂直方向上也是如此。
如果我们想让 <main> 元素里的内容也水平垂直居中的话，可以给 <main> 元素设置属性，此时它也是一个Flexbox：
main
display: flex;
align-items: center;
justify-content: center;
width: 18em;
height: 10em;
总结
我们平时常用的可能是文本、图片的居中，基于绝对定位的居中，或者用 Flexbox 来解决，以上办法也是根据实际情况比如元素是否定宽高以及兼容目标来使用的，除了以上解决方案之外，可能还有其他方案，但是hack的味道可能会比较明显，我们的浏览器支持越来越好，在移动端，我们一般都会采用 Flexbox 解决方案，希望大家从这些繁复的工作中解脱出来，做更多有创造性事情。
END.
20190320
居然看到了这里，最近发现一篇更全的关于垂直居中的总结，分享给大家。
如何居中一个元素（终结版）
也补充了一个方案：已知宽高，利用绝对定位来居中
以上是关于还不会CSS水平垂直居中？这里有12种方案的主要内容，如果未能解决你的问题，请参考以下文章