CSS中内容居中的方法有很多种，具体取决于您想要居中的内容是什么类型的元素以及是在什么情况下居中。以下是一些常见方法及代码示例：

CSS设置水平垂直居中的7种方法 第1张

1. 水平居中 - 文本或行内元素

使用 text-align 属性

.parent {
  text-align: center; /* 子元素如果是内联或内联块元素，将会水平居中 */
}

<!-- HTML -->
<p class="0040-da01-29f8-bf12 parent">
  <p>这是要居中的文本</p>
  <img src="image.jpg" alt="图片">
</p>

2. 水平居中 - 块级元素

使用 margin: 0 auto

.child {
  width: 300px; /* 需要给定一个宽度 */
  margin: 0 auto; /* 左右外边距自动分配 */
}

<!-- HTML -->
<p class="4b86-261c-15d9-edfd parent">
  <p class="261c-15d9-edfd-95fb child">这是要居中的块级元素</p>
</p>

3. 使用 Flexbox

.parent {
  display: flex;
  justify-content: center; /* 水平居中 */
}

<!-- HTML -->
<p class="379a-9cdb-0040-da01 parent">
  <p class="9cdb-0040-da01-29f8 child">这是要居中的任何元素</p>
</p>

4. 垂直居中 - 单行文本

使用 line-height

.parent {
  height: 100px; /* 给定一个高度 */
}
​​​​​​​.child {
  line-height: 100px; /* 与父元素高度相同 */
}

<!-- HTML -->
<p class="5977-4b86-261c-15d9 parent">
  <p class="4b86-261c-15d9-edfd child">这是单行垂直居中的文本</p>
</p>

5. 垂直居中 - 多行文本和块级元素

使用 Flexbox

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center; /* 垂直居中 */
}

<!-- HTML -->
<p class="cd0a-9dac-379a-9cdb parent">
  <p class="9dac-379a-9cdb-0040 child">这是多行垂直居中的内容</p>
</p>

6. 水平和垂直居中 - Flexbox 或 Grid

Flexbox 方式

.parent {
  display: flex;
  justify-content: center;
  align-items: center; /* 垂直居中 */
}

<!-- HTML -->
<p class="29f8-bf12-0c42-5977 parent">
  <p class="bf12-0c42-5977-4b86 child">水平和垂直居中</p>
</p>

Grid 方式

.parent {
  display: grid;
  place-items: center; /* 这相当于 align-items: center 和 justify-items: center 的简写 */
}

<!-- HTML -->
<p class="15e5-df31-9822-cd0a parent">
  <p class="df31-9822-cd0a-9dac child">使用Grid布局实现水平和垂直居中</p>
</p>

7. 使用 position 和 transform

当元素尺寸未知时，可以使用此方法。

.parent {
  position: relative;
}
​​​​​​​.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<!-- HTML -->
<p class="9cdb-0040-da01-29f8 parent">
  <p class="0040-da01-29f8-bf12 child">无论尺寸如何都会水平和垂直居中</p>
</p>

这些是CSS中最常用的居中方法，根据实际需求选择合适的策略。

以上就是CSS设置水平垂直居中的7种方法的详细内容，更多关于CSS设置水平垂直居中的资料请关注酷瑞百科其它相关文章！

☆未收藏(0)