css水平垂直居中方案

行内元素的水平居中
要实现行内元素（、等）的水平居中，只需把行内元素包裹在块级父层元素（

、

、

等）中，并且在父层元素CSS设置如下：

container{

text-align:center; 

}
并且适用于文字，链接，及其inline或者inline-block、inline-table和inline-flex。

Demo

块状元素的水平居中
要实现块状元素（display:block）的水平居中，我们只需要将它的左右外边距margin-left和margin-right设置为auto，即可实现块状元素的居中，要水平居中的块状元素CSS设置如下：

center{

margin:0 auto;

}

Demo

多个块状元素的水平居中
要实现多个水平排列的块状元素的水平居中，传统的方法是将要水平排列的块状元素设为display:inline-block，然后在父级元素上设置text-align:center，达到与上面的行内元素的水平居中一样的效果。

container{

text-align:center;

}

center{

display:inline-block;

}

Demo

已知高度宽度元素的水平垂直居中
法一 绝对定位与负边距实现
利用绝对定位，将元素的top和left属性都设为50%，再利用margin边距，将元素回拉它本身高宽的一半，实现垂直居中。核心CSS代码如下：
#container{
position:relative;
}

#center{
width:100px;
height:100px;
position:absolute;
top:50%;
left:50%;
margin:-50px 0 0 -50px;
}

Demo

法二 绝对定位与margin
这种方法也是利用绝对定位与margin，但是无需知道被垂直居中元素的高和宽。核心代码如下：
#container{
position:relative;
}

#center{
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
（同上故不再截图）
Demo

未知高度和宽度元素的水平垂直居中
法一. 当要被居中的元素是inline或者inline-block元素
当要被居中的元素是inline或者inline-block的时候，可以巧妙的将父级容器设置为display:table-cell，配合text-align:center和vertical-align:middle即可以实现水平垂直居中。
核心代码如下：

container{

display:table-cell;
text-align:center;
vertical-align:middle;

}

center{

}

Demo

法二. Css3显威力
利用Css3的transform，可以轻松的在未知元素的高宽的情况下实现元素的垂直居中。
核心代码如下：
#container{
position:relative;
}

#center{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Demo

基于Flexbox的解决方案

---

这是毋庸置疑的最佳解决方案，因为Flexbox（伸缩盒）是专门针对这类需求所设计的。我们之所以要讨论其他方案，仅仅是因为那些方案在浏览器的支持程度上稍微好一些而已。其实目前现代浏览器对 Flexbox 的支持度已经相当不错了。

我们只需写两行声明即可：先给这个待居中元素的父元素设置 display: flex（在这个例子中是元素），再给这个元素自身设置我们再熟悉不过的margin: auto（在这个例子中是元素）：

body {
display: flex;
min-height: 100vh;
margin: 0;
}

main {
margin: auto;
}

请注意，当我们使用Flexbox时，margin: auto不仅在水平方向上将元素居中，垂直方向上也是如此。还有一点，我们甚至不需要指定任何宽度（当然，如果需要的话，也是可以指定的）：这个居中元素分配到的宽度等于 max-content。

如果浏览器不支持Flexbox，页面渲染结果看起来就跟我们的起点图是一样的了（如果设置了宽度的话）。虽然没有垂直居中效果，但也是完全可以接受的。

Flexbo 的另一个好处在于，它还可以将匿名容器（即没有被标签包裹的文本节点）垂直居中。

我们先给这个元素指定一个固定的尺寸，然后借助Flexbox 规范所引入的align-items和justify-content属性，我们可以让它内部的文本也实现居中（我们可以对使用相同的属性来使元素居中，但margin: auto方法要更加优雅一些，并且同时起到了回退的作用）。

main {
display: flex;
align-items: center;
justify-content: center;
width: 12em;
height: 8em;
}

用Flexbox把匿名文本框居中

网格布局解决方案

{
display: grid;
grid-template-columns: 500px;
grid-template-rows: 300px;
width: 100%;
height: 100%;
align-content: center;
justify-content: center;
}