垂直居中大法

出门面试吧必考题目垂直居中百试不厌，不要问我为什么就是这么重要就是这么强势，你以为你会了吗其实我们都只是略知皮毛真正在项目里你会很头疼，话不多说我们

开始今天的表演。

1.CSS样式与HTML中标签属性的区别：

　　标签的属性是采用 属性名=“属性值” 表示的

　　CSS样式是采用名值对 属性名：属性值； 表示的

2.内联元素（行内元素）与块元素

　　（1）内联元素及其特点：

　　　  所谓的行内元素，指的是只占自身大小，不会独占一行
          常见的内联元素：
　　　  a img iframe span
           span没有任何语义，span标签专门用来选中文字，并对该文字设置样式

　　　　对内联元素设置宽高是无效的，也不可以设置行高，其宽度和高度都默认被元素撑开

　　　　将内联元素放在 li 标签中可以设置其宽高

　　　　可以对内联元素设置内边距，IE6以上浏览器支持

　　　　可以对内联元素设置外边距，但只对左右外边距起作用

　　 （2）块元素：

　　　　所谓的块元素是会独占一行的元素,无论他的内容多少都会独占一行
           p h1 h2 h3...都是块元素
           div标签没有任何语义，就是一个纯粹的块元素，并不会对其里面的元素设置任何样式

　　　　可以对块元素设置高度和边距

　　　　如果不自己设置宽度，其宽度为其父元素宽度

　　　　块元素中可以容纳块元素和内联元素，但内联元素中不能包含块元素

3.几种居中方式

　　（1）设置块元素中文字水平居中

　　　　使用text-align 样式设置块中文本或图片居中。

　　　　该样式只能操作块元素或者被CSS 显示成块元素的内联元素

　　　　对一个块元素设置该样式后，其子块元素中的文本或者图片也会相对于其子块元素居中

　　（2）块元素自身水平居中

　　　　通过设置 magin：0 auto； 使该块元素在其父元素中水平居中显示

　　（3）内联元素的垂直居中

　　　　通过设置 vertical-algin 样式

　　　　该属性适用于：

　　　　　　内联元素（被转换成内联元素的块元素）

　　　　　　display 设置为 table-cell 的元素

　　　　　　在 table 也就是表格中的元素

　　（4）设置块元素中文字垂直居中

　　　　　　通过设置块元素的内边距

　　（5）块元素自身垂直居中

　　　　　　可以通过设置外边距实现

　　　　　　通过绝对定位设置其距离父元素的 left right top bottom 来实现

      

这里直接上代码简单粗暴没毛病,垂直居中设置：

• 1.使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;

  .box{
  position:absolute;/*或fixed*/
  top:50%;
  left:50%;
  margin-top:-100px;
  margin-left:-200px;
  }

  • 2.利用position:fixed（absolute）属性，margin:auto这个必须不要忘记了;

.box{
    position: absolute;或fixed
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin: auto;
}

• 3.利用display:table-cell属性使内容垂直居中,这个方法在多行文字居中的时候用的比较多;

HTML代码：

<div class="box">
    <span>多行文字，此处居中设置</span>
</div>

CSS代码：

.box{
    display:table-cell;
    vertical-align:middle;
    text-align:center;
    width:100px;
    height:120px;
    background:purple;
}
.box span{
    display: inline-block;
    vertical-align: middle;
}

• 4.使用css3的新属性transform:translate(x,y)属性;

.box{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    -webkit-transform:translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -ms-transform:translate(-50%,-50%);
}

• 5.最高大上的一种，使用before，after伪元素;

HTML代码：

<div class='box'>
    <div class='content'>
        垂直居中
    </div>
</div>

CSS代码：

.box{
    position:fixed;
    display:block;
    background:rgba(0,0,0,.5);
}
.box:before{
    content:'';
    display:inline-block;
    vertical-align:middle;
    height:100%;
}
.box:after{
    content:'';
    display:inline-block;
    vertical-align:middle;
    height:100%;
}
.box .content{
    width:60px;
    height:60px;
    line-height:60px;
    color:red;
}

• 6.Flex布局;

.box{
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    水平居中
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-pack:center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
     垂直居中
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-align:center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
}