首页 前端知识 CSS设置水平垂直居中的方法( 7种 )

CSS设置水平垂直居中的方法( 7种 )

2024-03-29 15:03:45 前端知识 前端哥 373 836 我要收藏

还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信(gis-dajianshi),一起交流。

在这里插入图片描述

No.推荐链接
1Openlayers 【入门教程】 - 【源代码+图文 300+】
2Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3Cesium 【入门教程】 - 【源代码+图文示例200+】
4MapboxGL【入门教程】 - 【源代码+图文示例150+】
5前端就业宝典 【面试题+详细答案 1000+】

在这里插入图片描述

文章目录

      • 1. 水平居中 - 文本或行内元素
        • 使用 `text-align` 属性
      • 2. 水平居中 - 块级元素
        • 使用 `margin: 0 auto`
      • 3. 使用 Flexbox
      • 4. 垂直居中 - 单行文本
        • 使用 `line-height`
      • 5. 垂直居中 - 多行文本和块级元素
        • 使用 Flexbox
      • 6. 水平和垂直居中 - Flexbox 或 Grid
        • Flexbox 方式
        • Grid 方式
      • 7. 使用 `position` 和 `transform`

在这里插入图片描述

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

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

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

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

2. 水平居中 - 块级元素

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

<!-- HTML -->
<div class="parent">
  <div class="child">这是要居中的块级元素</div>
</div>

3. 使用 Flexbox

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

<!-- HTML -->
<div class="parent">
  <div class="child">这是要居中的任何元素</div>
</div>

4. 垂直居中 - 单行文本

使用 line-height
.parent {
  height: 100px; /* 给定一个高度 */
}

.child {
  line-height: 100px; /* 与父元素高度相同 */
}

<!-- HTML -->
<div class="parent">
  <p class="child">这是单行垂直居中的文本</p>
</div>

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

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

<!-- HTML -->
<div class="parent">
  <div class="child">这是多行垂直居中的内容</div>
</div>

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

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

<!-- HTML -->
<div class="parent">
  <div class="child">水平和垂直居中</div>
</div>
Grid 方式
.parent {
  display: grid;
  place-items: center; /* 这相当于 align-items: center 和 justify-items: center 的简写 */
}

<!-- HTML -->
<div class="parent">
  <div class="child">使用Grid布局实现水平和垂直居中</div>
</div>

7. 使用 positiontransform

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

.parent {
  position: relative;
}

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

<!-- HTML -->
<div class="parent">
  <div class="child">无论尺寸如何都会水平和垂直居中</div>
</div>

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4237.html
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!