CSS居中-CSDN博客

从三个方面来考虑居中

水平居中
垂直居中
水平及垂直居中

公共样式

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  background: #f06d06;
  margin: 10px;
}

main {
  background: white;
  margin: 20px 0;
  padding: 10px;
}
复制代码

1、水平居中

1.1 `inline`或`inline-*`元素水平居中

关键代码

text-align: center;
复制代码

样例代码及效果图：

HTML

<main class="inline-X-center">
  <span>i'm centered!</span>
</main>
复制代码

CSS

.inline-X-center {
  text-align: center;
}

.inline-X-center span {
  display: inline-block;
  background: black;
  color: white;
  padding: 10px;
}
复制代码

效果图

1.2 `block`元素水平居中

关键代码

margin: 0 auto;
复制代码

样例代码及效果图：

HTML

<main class="block-X-center">
  <div>i'm centered!</div>
</main>
复制代码

CSS

.block-X-center div {
  margin: 0 auto;
  max-width: 200px;
  
  background: black;
  color: white;
  padding: 10px;
}
复制代码

效果图

1.3 `flex`布局实现水平居中

关键代码

display: flex;
justify-content: center;
复制代码

样例代码及效果图：

HTML

<main class="flex-X-center">
  <div>i'm centered!</div>
</main>
复制代码

CSS

.flex-X-center {
  display: flex;
  justify-content: center;
}

.flex-X-center div {
  background: black;
  color: white;
  padding: 10px;
}
复制代码

效果图

2、垂直居中

2.1 `inline`或`inline-*`元素垂直居中

关键代码（设置上下内边距相等，模拟垂直居中效果）

padding-top: 30px;
padding-bottom: 30px;
复制代码

样例代码及效果图：

HTML

<main class="inline-Y-center">
  <span>i'm a centered line.</span>
</main>
复制代码

CSS

.inline-Y-center span {
  display: inline-block;
  padding-top: 30px;
  padding-bottom: 30px;

  background: black;
  color: white;
  padding-left: 10px;
  padding-right: 10px;
}
复制代码

效果图

2.2 `line-height`实现垂直居中

关键代码（只考虑单行文本，不换行）

line-height: 100px;
white-space: nowrap;
复制代码

样例代码及效果图：

HTML

<main class="line-height-Y-center">
  <div>i'm a centered line.</div>
</main>
复制代码

CSS

.line-height-Y-center div {
  line-height: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  background: black;
  color: white;
  padding: 10px;
}
复制代码

效果图

2.3 `display: table`实现垂直居中

关键代码

父元素

display: table;
复制代码

子元素

display: table-cell;
vertical-align: middle;
复制代码

样例代码及效果图：

HTML

<main class="table-Y-center">
  <p>I'm vertically centered text in a CSS-created table layout.</p>
</main>
复制代码

CSS

.table-Y-center {
  display: table;
  height: 200px;
}

.table-Y-center p {
  display: table-cell;
  vertical-align: middle;

  background: black;
  color: white;
  padding: 10px;
}
复制代码

效果图

2.4 `flex`实现垂直居中

关键代码

display: flex;
flex-direction: column;
justify-content: center;
复制代码

样例代码及效果图：

HTML

<main class="flex-Y-center">
  <p>I'm vertically centered of text in a flexbox container.</p>
</main>
复制代码

CSS

.flex-Y-center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 200px;
}

.flex-Y-center p {
  background: black;
  color: white;
  padding: 10px;
}
复制代码

效果图

2.5 `position`实现垂直居中

关键代码

position: relative;
top: 50%;
transform: translateY(-50%);
复制代码

样例代码及效果图：

HTML

<main class="position-Y-center">
  <div>I'm a block-level element, centered vertically within my parent.</div>
</main>
复制代码

CSS

.position-Y-center {
  height: 200px;
}

.position-Y-center div {
  position: relative;
  top: 50%;
  transform: translateY(-50%);

  background: black;
  color: white;
  padding: 10px;
}
复制代码

效果图

3、水平及垂直居中

3.1 `position`实现水平及垂直居中

关键代码

position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: inline-block;
复制代码

样例代码及效果图：

HTML

<main class="position-XY-center">
  <div>I'm a block-level element, centered within my parent.</div>
</main>
复制代码

CSS

.position-XY-center {
  height: 200px;
}

.position-XY-center div {
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;

  background: black;
  color: white;
  padding: 10px;
}
复制代码

效果图

3.2 `flex`实现水平及垂直居中

关键代码

display: flex;
justify-content: center;
align-items: center;
复制代码

样例代码及效果图：

HTML

<main class="flex-XY-center">
  <div>I'm a block-level element, centered within my parent.</div>
</main>
复制代码

CSS

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

  height: 200px;
}

.flex-XY-center div {
  background: black;
  color: white;
  padding: 10px;
}
复制代码

效果图

3.3 `grid`实现水平及垂直居中

关键代码

父元素

display: grid;
复制代码

子元素

margin: auto;
复制代码

样例代码及效果图：

HTML

<main class="grid-XY-center">
  <div>I'm centered!</div>
</main>
复制代码

CSS

.grid-XY-center {
  display: grid;

  height: 200px;
}

.grid-XY-center div {
  margin: auto;

  background: black;
  color: white;
  padding: 10px;
}
复制代码

效果图