css居中显示

css垂直居中

html代码:

<div class="parent">
    <div class="child">垂直居中</div>
</div>

 (1) 行内文本垂直居中

css代码

.parent {
    height: 100px;
}
.child {
    line-height: 100px;
}

(2) 未知高度块状元素垂直居中

第一种方法

.parent {
  width: 100%;
  height: 100%;
  position: relative;
  /*display: table;*/
}
.child {
  width: 500px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

第二种方法

.parent {
    position: relative;
    width: 100%;
    height: 100%;
}
.child {
  width: 500px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30%;
  margin: auto;
}

第三种方法

.parent {
  width: 100%;
  height: 100%;
  display: table;
}
.child {
  display: table-cell;
  vertical-align: middle;
}

第四种方法flex布局

.parent {
    width: 100%;
    height: 100%; /*这里一定要写高度奥!*/
    display: flex;
    align-items: center;
    justify-content: center;
  }

 (3) 已知高度块状元素垂直居中

.parent {
  height: 300px;
}
.child {
  height: 40px;
  margin-top: 130px; /*这个只为父元素的高度减去这个元素的高度除以二计算得到的*/
  border: 1px solid #ccc;
}