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;

}