web前端面试水平垂直居中详解

1.行内元素的水平垂直居中；通过在父元素中设置text-align，让子元素的文本进行居中；然后通过line-height属性让子元素的行高等于父元素的高度。

    行内元素水平垂直居中

    #div1{
		background: #ccc;
		height: 200px;
		text-align: center;
	}
	#divSpan{
		line-height: 200px;
	}

2.不定宽高父元素时的块级元素的水平垂直居中（最常用）；通过postition:absolute进行绝对定位，然后用百分比设置top和left；再用margin-left和margin-top消除子元素宽高的一半偏移量。

 

    #div1{
		position: relative;
		height: 200px;
		background: #ccc;
	}
	#divImg{
		position: absolute;
		margin-left: -25px;
		margin-top: -25px;
		left: 50%;
		top: 50%;
	}

3.定宽高父元素时的块级元素的水平垂直居中；通过margin-left和margin-top两个属性然后加以计算即可。

 

    #div1{
		height: 200px;
		width: 500px;
		background: #ccc;
	}
	#divImg{
		border: 20px solid red;
		margin-left: 205px;
		margin-top: 55px;
	}

4.不定宽高父元素时的块级元素的水平垂直居中（常用）；通过flex属性和margin:auto即可实现，可以解决不少布局上的问题。

	

		
	

    #main{
		height: 300px;
		display: flex;
        background: black;
	}
	#mainDiv{
		margin:auto ;
	}

4.1复杂一点点的flex布局水平垂直居中。

    
Item 1
    

    
    
    
Item 3
    
Item 4
    
Item 6
  
    .container {
      height: 300px;
      background-color: lavender;
      display: flex;
      flex-wrap: wrap;
    }

    .item {
      background-color: cornflowerblue;
      width: 100px;
      height: 50px;
      margin: auto;
      text-align: center;
      line-height: 50px;
    }
    .item2{
      background-color: cornflowerblue;
      width: 100px;
      height: 50px;
      margin: auto;
      text-align: center;
      vertical-align: middle;
      display: table-cell;
    }
    .item2 img{
    	display: inline-block;
    	margin-top: 5%;

    }
    .item3 {
      background-color: cornflowerblue;
      width: 100px;
      height: 50px;
      margin: auto;
      text-align: center;
    }

想要深入学习flex的话，可以参考下面这个
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html