div垂直居中和水平居中的多种方式

一、水平居中

法1：子元素设置margin:0 auto;

 <div class="parent">
    <div class="child"></div>
  </div>

.parent{
    border:solid 2px red;
    width: 200px;
    height: 200px;
  }
  .child{
    background: green;
    width: 50px;
    height: 50px;
    margin:0 auto; 
  }

法2：text-align

a{
    width: 25%;
    height: 60px;
    text-align: center;
    line-height: 60px;/*垂直居中*/
}

二、垂直居中

固定height情况下用line-height

a{
	width:25%;
	height:60px;
	line-height:60px;
}

三、水平垂直居中–已知子父宽高

子元素在父元素里垂直居中

居中法1：

父元素和子元素都有确定宽高，子元素设绝对定位，子元素的lelt,top50%, 外边距为自身宽高的一半。

 <div class="parent">
    <div class="child"></div>
 </div>

 .parent{
    border:solid 2px red;
    width: 200px;
    height: 200px;
    position: relative;
  }
  .child{
    background: green;
    width: 50px;
    height: 50px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -25px;/* 外边距为自身宽高的一半*/
    margin-top: -25px;
  }

居中法2：

父元素和子元素都有确定宽高，子元素设绝对定位，子元素的 top，bottom，left，right都为0， margin: auto;

 /* 下面这种居中方式，只适用于父元素的大小有确定时    如果大小是被内容撑开的，不能用 */
.parent{
    border:solid 2px red;
    width: 200px;
    height: 200px;
    position: relative;
  }
  .child{
    background: green;
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }

居中法3：transform属性

 /*未知容器的宽高，利用`transform`属性*/
  .parent{
    border:solid 2px red;
    width: 200px;
    height: 200px;
    position: relative;
  }
  .child{
    background: green;
    width: 50px; /*可无*/
    height: 50px;/*可无*/
    position: absolute; /*相对定位或绝对定位均可*/
    margin: 0 auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /*移动元素自身高宽的一半，因为定位时元素有自身高宽*/
  }

居中法4：flex

缺点：兼容不好吧，详情见：

/*利用flex布局实际使用时应考虑兼容性*/
  .parent{
    border:solid 2px red;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;/*垂直居中*/
    justify-content: center;/*水平居中*/ 
  }
  .child{
    background: green;
    width: 50px;
    height: 50px;
  }

居中法5：

 /*利用text-align:center和vertical-align:middle属性*/
  .parent{
    border:solid 2px red;
    width: 200px;
    height: 200px;
      
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* 水平垂直居中 */
    text-align: center;
    /* 仅垂直居中 */
    /* text-align: 0; */
    font-size: 0;
    white-space: nowrap;
    overflow: auto;
  }
  .parent::after{
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  .child{
    background-color: green;
    width: 50px;
    height: 50px;
    display: inline-block;
    white-space: normal;
    vertical-align: middle;
  }

四、水平垂直居中–未知子元素宽高，已知父元素宽高

未知子元素的宽高，让它水平垂直居中于父元素

居中法1：transform属性

思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%)
优点：高大上,可以在webkit内核的浏览器中使用
缺点：不支持IE9以下不支持transform属性

<div class="parent">
	<div class="child">hello</div>
</div>

 .parent{
    position: relative;
    height: 200px;
    width: 200px;
    background: #b3aaae;
  }
 
  .child{
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    transform: translate(-50%, -50%);
    background: green;
  }

居中法2：table

思路：显示设置父元素为：table，子元素为：cell-table，这样就可以使用vertical-align: center，实现水平居中
优点：父元素（parent）可以动态的改变高度（table元素的特性）
缺点：IE8以下不支持

未知宽高子元素

<div class="parent">
	<div class="child">hello</div>
</div>

.parent{
    display: table;
    height:300px;
    width: 300px;
    background: #b3aaae;
  }
 
  .child{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    font-size: 16px;
   /* background-color: green; */
  }

居中法3：flex

<div class="parent">
	<div class="child">hello</div>
</div>

.parent {
    display: flex;
    justify-content: center; /* 设置弹性容器的item在主轴上居中 */
    align-items: center; /* 设置弹性容器的item在交叉轴上居中 */
    width: 100px;
    height: 100px;
    border: 1px solid #ccc;
  }
  .child {
    background: #ddd;
  }