html垂直居中怎么设置（html的水平居中标签）

1. 元素高度声明的情况下在父容器中居中：绝对居中法

<div class="parent">   <div class="absolute-center"></div>  </div>  .parent {   position: relative;  }  .absolute-center {   position: absolute;   margin: auto;   top: 0;   right: 0;   bottom: 0;   left: 0;   height: 70%;   width: 70%;  }  优点：  1.跨浏览器，包括 IE8-10  2.无需其他冗余标记，CSS 代码量少  3.完美支持图片居中  4.宽度高度可变，可用百分比  缺点：  1.必须声明高度

2. 负外边距：当元素宽度高度为固定值时。设置 margin-top/margin-left 为宽度高度一半的相反数，top:50%;left:50%

<div class="parent">   <div class="negative-margin-center"></div>  </div>  .parent {   position: relative;  }  .negative-margin-center {   position: absolute;   left: 50%;   top: 50%;   margin-left: -150px;   margin-top: -150px;   height: 300px;   width: 300px;  }  优点：  良好的跨浏览器特性，兼容 IE6-7  代码量少  缺点：  不能自适应，不支持百分比尺寸和 min-/max-属性设置  内容可能溢出容器  边距大小域与 padding，box-sizing 有关

3. CSS3 Transform 居中：

<div class="parent">   <div class="transform-center"></div>  </div>  .parent {   position: relative;  }  .transform-center {   position: absolute;   left: 50%;   top: 50%;   margin: auto;   width: 50%;   -webkit-transform: translate(-50%， -50%);   -moz-transform: translate(-50%， -50%);   transform: translate(-50%, -50%);  }  优点：  内容高度可变  代码量少  缺点：  IE8 不支持  属性需要浏览器厂商前缀  可能干扰其他 transform 效果

4. table-cell 居中：

<div class="center-contner is-table">   <div class="table-cell">   <div class="center-block"></div>   </div>  </div>  .center-container.is-table {   display: table;  }  .is-table .table-cell {   display: table-cell;   vertical-align: middle;  }  .is-table .center-block {   width: 50%;   margin: 0 auto;  }  优点：  高度可变  内容溢出会将父元素撑开  跨浏览器兼容性好  缺点：  需要额外 html 标记