实现css文字垂直居中的8种方法

下面是“实现css文字垂直居中的8种方法”的完整攻略。

方法1：使用line-height属性

.container {
  height: 200px;
  line-height: 200px;
}

这种方法适用于单行文字的垂直居中。通过将容器的line-height设置为容器的高度，文字就会垂直居中。

示例1：

<div class="container">Hello World</div>

.container {
  display: table-cell;
  vertical-align: middle;
}

这种方法适用于多行文字的垂直居中。通过使用display:table-cell和vertical-align:middle将容器转换为表格单元格，然后将其垂直对齐。

示例2：

<div class="container">
  <p>这是第一行文字</p>
  <p>这是第二行文字</p>
</div>

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

这种方法适用于多行或单行文字的垂直和水平居中。通过使用flexbox布局，将容器中的内容垂直和水平居中。

示例3：

<div class="container">
  <p>这是第一行文字</p>
  <p>这是第二行文字</p>
  <p>这是第三行文字</p>
</div>

.container {
  position: relative;
}

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

这种方法适用于单行或多行文字的垂直和水平居中。通过使用position和transform属性将内容绝对定位并调整其位置。

示例4：

<div class="container">
  <p class="center">Hello World</p>
</div>

.container {
  text-align: center;
}

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

这种方法适用于单行或多行文字的垂直居中。通过使用display:inline-block和vertical-align:middle将内容转换为行内块元素，然后将其垂直对齐。

示例5：

<div class="container">
  <p class="center">Hello World</p>
</div>

.container {
  display: flex;
}

.center {
  margin: auto;
}

这种方法适用于单行或多行文字的垂直和水平居中。通过使用display:flex和margin:auto，将容器中的内容垂直和水平居中。

示例6：

<div class="container">
  <p class="center">Hello World</p>
</div>

.container {
  display: table;
  height: 200px;
  width: 100%;
}

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

这种方法适用于单行或多行文字的垂直居中。通过使用table布局，将容器中的内容垂直和水平居中。

示例7：

<div class="container">
  <div class="center">Hello World</div>
</div>

.container {
  display: grid;
  height: 200px;
  align-items: center;
  justify-items: center;
}

.center {
  text-align: center;
}

这种方法适用于单行或多行文字的垂直和水平居中。通过使用Grid布局，将容器中的内容垂直和水平居中。

示例8：

<div class="container">
  <div class="center">Hello World</div>
</div>

以上就是实现css文字垂直居中的8种方法。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：实现css文字垂直居中的8种方法 - Python技术站