垂直居中的奥义

水平垂直居中分析

基础结构

<div class="content">
  <div class="box"></div>
</div>
/* 基础样式 */
.content {
  width: 300px;
  height: 300px;
  background: #abc;
}
.box {
  width: 100px;
  height: 100px;
  background: #abcdef;
}

水平居中

方法一:兼容IE5

.content{
  text-align:center;
}
.box{
  display: inline-block;
}

方法二:兼容IE5

.content{
  position: relative;
}
.box{
  position: absolute;
  left: 50%;
  margin-left: -50px; /* box.width / 2 */
}

方法三:兼容IE7

.box{
  margin: 0 auto;
}

方法四:兼容IE8

.content{
  position: relative;
}
.box{
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

方法五:兼容IE9

.box{
  position: relative;
  left: 50%;
  transform: translate(-50%, 0);
}

方法六:兼容IE9

.content {
  overflow: hidden;
}

.box {
  margin: 0 calc(50% - 50px); /* box.width / 2*/
}

方法七:兼容IE10

.content{
  display: flex;
  justify-content: center;
}

垂直居中

方法一:兼容IE5

.content{
  position: relative;
}
.box{
  position: absolute;
  top: 50%;
  margin-top: -50px; /* box.width / 2 */
}

方法二:兼容IE8

.content {
  line-height: 350px; /* content.height + 1/2 * box.height */
}
.box{
  display: inline-block;
}

方法三:兼容IE8

.content{
  position: relative;
}
.box{
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

方法四:兼容IE9

.content {
  overflow: hidden;
}

.box {
  margin: calc(50% - 50px) 0; /* box.height / 2*/
}

方法五:兼容IE9

.box{
  position: relative;
  top: 50%;
  transform: translate(0, -50%);
}

方法六:兼容IE10

.content{
  display: flex;
  align-items: center;
}

综上所述大致举例:水平垂直居中

先看效果图:

方法一:兼容IE5

.content{
  position: relative;
}
.box{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px; /* box.height / 2 */
  margin-left: -50px; /* box.width / 2 */
}

方法二:兼容IE8

.content {
  text-align: center;
  line-height: 350px;  /* content.height + 1/2 * box.height */
}
.box {
  display: inline-block;
}

方法三:兼容IE8

.content{
  position: relative;
}
.box{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

方法四:兼容IE9

.box{
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

方法五:兼容IE9

.content {
  overflow: hidden;
}

.box {
  margin: calc(50% - 50px) auto; /* box.width / 2*/
}

方法六:兼容IE10

.content{
  display: flex;
  align-items: center;
  justify-content: center;
}

总结

本次我只是举例了一些常用的居中方法,还有其他通过辅助标签,display: table;等实现的方法。如果各位看客老爷还有其他更好,更友善的实现方式,请告知。

以下相关文章