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

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

<div id="div1">
    <label id='divSpan'>行内元素水平垂直居中</label>
</div>
    #div1{
		background: #ccc;
		height: 200px;
		text-align: center;
	}
	#divSpan{
		line-height: 200px;
	}

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

<div id="div1">
 <img id="divImg" src="230.jpg" style="width: 50px;height: 50px">
</div>
    #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两个属性然后加以计算即可。

<div id="div1">
 <img id="divImg" src="230.jpg" style="width: 50px;height: 50px">
</div>
    #div1{
		height: 200px;
		width: 500px;
		background: #ccc;
	}
	#divImg{
		border: 20px solid red;
		margin-left: 205px;
		margin-top: 55px;
	}

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

<div id="main">
	<div id="mainDiv">
		<img src="640.jpg" style="height: 100px;width: 100px;">
	</div>
</div>
    #main{
		height: 300px;
		display: flex;
        background: black;
	}
	#mainDiv{
		margin:auto ;
	}

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

<div class="container">
    <div class="item">Item 1</div>
    <div class="item2">
    <img src="640.jpg" style="width: 80%;height: 80%">
    </div>
    <div class="item3"><p>Item 3</p></div>
    <div class="item">Item 4</div>
    <div class="item">Item 6</div>
  </div>
    .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