CSS中实现文字居中---笔记

目录

1行内元素居中

2块级元素居中

3垂直居中

4Flexbox 布局

5绝对定位居中

---

1.行内元素居中

• 将文字包裹在一个行内元素(如<span>)内
• 给父容器设置text-align: center;

实例：

.container {
  text-align: center;
}
.container span {
  display: inline-block;
}

2.块级元素居中

• 给块级元素设置margin: 0 auto;

 示例:

.container {
  width: 200px;
  margin: 0 auto;
}
 

3.垂直居中

• 将文字包裹在一个行内元素(如<span>)内
• 给父容器设置line-height等于容器高度

 示例:

.container {
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.container span {
  display: inline-block;
  vertical-align: middle;
}
 

4.Flexbox 布局

• 给父容器设置display: flex;
• 设置justify-content: center;和align-items: center;

 实例：

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

5.绝对定位居中

• 给父容器设置position: relative;
• 给文字元素设置position: absolute;并使用transform属性进行偏移

示例：

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

这些都是常见的文字居中方法,可以根据具体情况选择合适的方式。此外,也可以结合不同的方法来实现更复杂的布局需求。

给博主点赞关注支持一下吧