【前端】这可能是你看过最全的css居中解决方案了~

摘要：水平居中行内元素解决方案适用元素文字，链接，及其其它或者类型元素，，部分代码文字元素链接元素链接元素链接元素部分代码解决方案将元素包裹在一个属性为的父级元素中如设置这个父级元素属性即可现在大家可以看到和中的子元素水平居中了水平居

适用元素：文字，链接，及其其它inline或者inline-*类型元素（inline-block，inline-table，inline-flex）

html部分代码:
    
文字元素
    

css部分代码:
    nav, div{
    text-align: center;
        }
/*
解决方案：
将inline元素包裹在一个display属性为block的父级元素中（如,div, nav)
设置这个父级元素属性: text-align:center即可
*/

/* 现在大家可以看到nav和div中的子元素水平居中了 */

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

 html部分代码:
    

  水平居中的块状元素
    
    
水平居中的块状元素

 css部分代码:
/*
注意：需要居中的块元素需要有固定的宽度，否则无法实现居中，因为占据100%宽度
*/
div,p {
  width: 200px; /* 这里需要设置元素宽度 */
  height: 150px;
  background: #222;
  color: #FFF;
}
/* 定义居中关键属性 */
.center{
  /* 这里可以设置顶端外边距 */
  margin: 10px auto;
}
/* 现在大家可以看到居中效果的块状元素了 */

如果页面里有多个块状元素需要水平排列居中，可以将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center即可实现。

 html部分代码:
    

    水平居中的块状元素
    
    

    水平居中的块状元素
    


  css部分代码:
/*
解决方案：
设置这几个块状的元素display属性为inline-block，并且设置父元素text-align属性为center即可
*/
.center{
  display:inline-block;
}
body{
  text-align:center;
}
/* 元素美化 */
div{
  width: 100px;
  background: #222;
  height: 50px;
  color: #FFF;
  padding: 10px;
}

使用flexbox布局，只需要把待处理的块状元素的父元素添加属性display:flex及justify-content:center即可

 html部分代码:

水平居中的块状元素
水平居中的块状元素

 css部分代码:

解决方案：
设置需要水平居中的块状元素的父元素display为flex ，并且justify-content属性为center即可

body{
  display: flex;
  justify-content: center;
}
/* 页面美化元素 */
div{
  width: 100px;
  background: #222;
  height: 50px;
  color: #FFF;
  padding: 10px;
  margin: 10px;
}

当一个行内元素，即inline，inline-*类型的元素需要居中的话，可以将它的height和line-height同时设置为父元素的高度即可实现垂直居中效果。

 html部分代码:

    

    hello, gbtags.com
    

  css部分代码:

解决方案：将inline元素的高度和line-height设备为一致即可
#container{
  background: #222;
  height: 200px;
}
/*  以下代码中，将a元素的height和line-height设置的和父元素一样高度即可实现垂直居中 */
a{
  height: 200px;
  line-height:200px;  
  color: #FFF;
}

组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果，如下：

 html部分代码:


  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis blanditiis optio accusamus quia sapiente at labore consectetur in quasi veritatis possimus quod nihil aliquam vero saepe rem quas. Ratione eligendi!
  


  css部分代码:
解决方案：
使用display:table-cell和vertical-align来控制元素的居中效果
.container{
  background: #222;
  width: 300px;
  height: 300px;
  /* 以下属性垂直居中 */
  display: table-cell;
  vertical-align:middle;
}
a{
  color:#FFF;
}

html代码：




css代码：

解决方案：将待居中元素设置为绝对定位，并且设置margin-top为居中元素高度一半的负值
div{
  width: 100px;
  height: 100px;
  background: #222
}
/* 以下为居中代码 */
.item{
  top: 50%;
  margin-top: -50px;
  position: absolute;
  padding:0;
}
/* 现在可以看到这个元素垂直居中了，如果元素有padding设置，请自己相对计算一下margin-top值 */

对于无法知道高度的元素，使用transform属性来垂直移动来实现垂直居中：

html代码：
    

  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet sint repellendus ab aut quisquam eligendi est in deleniti.


css代码：
解决方案：
因为无法指定margin-top的偏移量，所以这里使用transform属性，垂直移动-50%即可
div{
  width: 150px;
  background: #222;
  color: #FFF;
}
/* 元素垂直居中代码 */
.item{
  top: 50%;
  position: absolute;
  transform: translateY(-50%); /* 这里我们使用css3的transform来达到类似效果 */
}

html代码：



css代码：

解决方案：
将设置元素绝对定位，并且设置margin-left和margin-right为居中元素(高度或宽度/2)的负值即可
div{
  width: 150px;
  height: 150px;
  background: #222;
  color: #FFF;
}
.item{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -75px;
  margin-left: -75px;
}
/* 以上代码即可保证一个已知高度和宽度的元素水平垂直都居中 */

html代码：


  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate nostrum quaerat debitis.


css代码：

解决方案：将设置元素绝对定位，并且设置transform的translate为Ｘ，Ｙ轴同时移动-50%即可
div{
  background: #222;
  color: #FFF;
}
/* 以下代码保证元素在水平和垂直方向上绝对居中 */
.item{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

 html代码：


  


 css代码：

解决方案：设置flex布局，并且定义居中元素的父元素justify-content和align-items属性为center即可
/* 子元素CSS */
.item{
  background: #222;
  color: #FFF;
  width: 100px;
  height: 100px;
}
.parent{
  display: flex;
  justify-content:center;
  align-items: center;
  /* 注意这里需要设置高度来查看垂直居中效果 */
  background: #AAA;
  height: 300px;
}

注：以上资源整理自极客标签学习文档，推荐大家学习使用

附上网址：http://www.gbtags.com