对于行内元素

text-align: center;
1

对于确定宽度的块级元素

margin: 0 auto

.center {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}
1
2
3
4
5

绝对定位和 margin-left: -(宽度值/2)

.content {
  width: 200px;
  position: absolute;
  left: 50%;
  margin-left: -100px; /* 该元素宽度的一半,即100px */
  background-color: aqua;
}
1
2
3
4
5
6
7

absolute + margin:auto

.content {
  position: absolute;
  width: 200px;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
1
2
3
4
5
6
7
8
9

对于未知宽度的块级元素

table 标签配合 margin 左右 auto 实现水平居中

使用 table 标签(或直接将块级元素设值为 display:table),再通过给该标签添加左右 margin 为 auto

inline-block+text-align

display:inline-block;(或 display:inline)和 text-align:center;实现水平居中,如何解决 inline-block 元素的空白间距

绝对定位+transform

.content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 移动元素本身50% */
  background: aqua;
}
1
2
3
4
5
6

flex

.contentParent {
  display: flex;
  flex-direction: column;
}

.content {
  align-self: center;
}
1
2
3
4
5
6
7
8
.contentParent {
  display: flex;
}

.content {
  margin: auto;
}
1
2
3
4
5
6
7

grid

【1】在网格容器上设置 justify-items 或 justify-content

<style>
  .parent {
    display: grid;
    justify-items: center;
    /*justify-content:center;*/
  }
</style>
1
2
3
4
5
6
7

2】在网格项目中设置 justify-self 或者 margin: 0 auto

<style>
  .parent {
    display: grid;
  }
  .child {
    justify-self: center;
    /*margin: 0 auto;*/
  }
</style>
1
2
3
4
5
6
7
8
9

fit-content+margin

.content {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
1
2
3
4
5

TOC