css垂直水平居中

1. 已知居中元素宽高

需要的html为:

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

实现的效果：

 

方法一：设置 position：absolute，并设置四个方向为0，最后设置margin：auto，可以实现该效果

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.parent {
  position: relative;
  width: 300px;
  height: 200px;
  border: 10px solid;
}
.child {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  height: 100px;
  width: 100px;
  background: red;
}

 方法二：设置 absolute 和 负margin(推荐)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.parent {
  position: relative;
  width: 300px;
  height: 200px;
  border: 10px solid;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  height: 100px;
  width: 100px;
  background: red;
}

方法三：和上面类似使用calc计算

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.parent {
  position: relative;
  width: 300px;
  height: 200px;
  border: 10px solid;
}
.child {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  height: 100px;
  width: 100px;
  background: red;
}

方法四：当父元素宽高固定时，设置 padding 内补丁，计算父级减去边框宽度再减去子元素宽高除以2

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.parent {
  width: 300px;
  height: 200px;
  border: 10px solid;
  padding: 40px 90px;
}
.child {
  height: 100px;
  width: 100px;
  background: red;
}

2. 未知居中元素宽高(子元素宽高随意)

方法一：absolute定位，transform移动

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.parent {
  position: relative;
  width: 300px;
  height: 200px;
  border: 10px solid;
}
.child {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: red;
}

方法二：设置子元素 display：inline-block；然后设置父元素text-align：center 水平居中。设置子元素vertical-align：middle垂直居中。设置父元素的行高为边框内容的高度，设置子元素行高为initial。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.parent {
  width: 300px;
  height: 200px;
  line-height: 180px;
  text-align: center;
  border: 10px solid;
}
.child {
  display: inline-block;
  vertical-align: middle;
  line-height: initial;
  background: red;
}

方法三：使用css-table布局(推荐)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.parent {
  width: 300px;
  height: 200px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  border: 10px solid;
}
.child {
  display: inline-block;
  background: red;
}

方法四：使用flex布局(推荐)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.parent {
  width: 300px;
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 10px solid;
}
.child {
  display: inline-block;
  background: red;
}

方法五：使用flex布局+margin：auto

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.parent {
  width: 300px;
  height: 200px;
  display: flex;
  border: 10px solid;
}
.child {
  margin: auto;
  background: red;
}

方法六：使用grid布局

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.parent {
  width: 300px;
  height: 200px;
  display: grid;
  justify-content: center;
  align-items: center;
  border: 10px solid;
}
.child {
  background: red;
}

方法七：使用grid布局+grid-item

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.parent {
  width: 300px;
  height: 200px;
  display: grid;
  border: 10px solid;
}
.child {
  justify-self: center;
  align-self: center;
  background: red;
}