526互联

css 水平垂直居中的几种方法

发布时间 2023-11-21 17:05:52作者: 甜水

水平垂直居中的几种方式

记录一下容器内只有单一元素时居中的几种方式

<div style="width: 300px; height: 300px" class="wrap">
      <div style="width: 100px; height: 100px" class="box"></div>
</div>

1.容器flex,调整内部轴线

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

2.容器flex,子元素margin-auto

.wrap {
  display: grid;
}

.box{
  margin: auto;
}

3.模拟table-cell

.wrap {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.box{
  display: inline-block;
}

4.模拟grid

.wrap {
  display: grid;
}

.box{
  align-self: center;
  justify-self: center;
}

5.margin + transform

margin设置为auto时会吸收可用的空间，比如如果想要居右，可以设置margin-left为auto

.wrap {
  overflow: hidden;
}

.box{
  margin: 50% auto;
  transform: translateY(-50%);
}

6.inline-block + vertical-middle

.wrap {
  text-align: center;
  line-height: 300px;
}

.box{
  display: inline-block;
  vertical-align: middle;
}

7.比较简单的absolute + transform布局，父相对子绝对

.wrap {
  position: relative;
}

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

8.absolute + 负margin, 和上一个比较像

.wrap {
  position: relative;
}

.box{
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

9.absolute + margin-auto

.wrap {
  position: relative;
}

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