【HTML元素居中】元素水平垂直居中的常用方法

HTML元素居中

- 元素居中

元素居中

常用水平垂直居中

行元素、块元素都可以使用。

flex + center

css 复制代码

  .parent {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .child {
    width: 100px;
    height: 100px;
    border: 1px solid red;
  }

html 复制代码

  <div class="parent">
    <div class="child"></div>
  </div>

parent有多个child时, 会以所有child的宽高之和 来居中显示到parent元素上

flex + margin

css 复制代码

  .parent {
    display: flex;
  }
  .child {
    border: 1px solid red;
  }

html 复制代码

  <div class="parent">
    <div class="child"></div>
  </div>

parent有多个child时, 子元素会平均分配父节点的宽高

position: absolute; transform
父元素高度必须设置，或者父元素高度由其他子元素撑开. 不然会出现父元素高度塌陷

css 复制代码

.parent {
  height: 300px;
  position: relative;
  border:1px solid red;
}

.child {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%);
}

html 复制代码

<div class="parent">
  <div class="child"></div>
</div>

parent有多个child时, 设置定位absolute的元素会居中显示，其他元素从父元素开始的位置按照从上到下、从左到右的顺序依次排列

grid place-item: center

css 复制代码

  .parent {
    height: 300px;
    display: grid;
    place-items: center;
    border: 1px solid red;
  }

  .child {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid red;
  }

html 复制代码

  <div class="parent">
    <div class="child"></div>
  </div>

parent有多个child时, 子元素水平居中，垂直方向上会平均分配父节点的高度

行内元素居中

水平居中

给父元素添加 text-align: center, 且子元素可继承text-align属性
垂直居中

给父元素添加 display: table-cell; vertical-align: middle;

文本垂直居中：

给居中元素添加 height: 30px;line-height: 30px

水平垂直居中
table-cell + vertical-align + text-align

css 复制代码

  .parent {
    width: 300px;
    height: 300px;
    border: 1px solid red;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }

  .child {
    display: inline-block;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    border: 1px solid red;
  }

html 复制代码

<div class="parent">
  <span class="child"></span>
</div>

块级元素居中

水平居中

margin: 0 auto
margin-left: calc(50% - width/2px)

子元素width需固定

css 复制代码

.parent {
  height: 300px;
  border: 1px solid red;
}
/* margin + auto */
.child-1 {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid red;
  margin: 10px auto;
}
/* margin-left + calc */
.child-2 {
  width: 420px;
  height: 35px;
  margin-left: calc(50% - 210px);
  border: 1px solid red;
}

html 复制代码

<div class="parent">
  <div class="child-1"></div>
  <div class="child-2"></div>
</div>

水平垂直居中
position: absolute; left; top; bottom; right; margin: auto

子元素宽高固定。

css 复制代码

.parent {
  height: 300px;
  border: 1px solid red;
  position: relative;
}

.child {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

html 复制代码

<div class="parent">
  <div class="child"></div>
</div>

margin

当元素脱离默认文档流时（浮动，绝对定位，固定定位）,margin失效

给inline-block和inline设置margin:0 auto 时是没用的