CSS居中对齐指南---ProMax

最新推荐文章于 2024-07-14 23:52:32 发布

原创最新推荐文章于 2024-07-14 23:52:32 发布 · 286 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #html #前端

本文详述了CSS中让元素居中对齐的六种方法：使用变换、Flex布局、负边距、网格、填充和表格单元格。适合前端开发者掌握不同场景下的居中技巧，包括水平和垂直居中。

让我们来看看我对css的毕生所学

1. 使用变换

什么时候用：

当元素的宽度和高度未知时；
卡片式弹出框中有多个子元素，其中一个焦点元素位于中心。

这个思路是使用绝对定位——top和left 50％，然后应用负变换。top和left中使用的值根据父元素的尺寸解析，而translate方法中的值根据元素本身的尺寸解析。

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

2. 使用Flex

什么时候用：

当有一个或多个元素要居中时；
当子元素是动态的并且大小未知时；
当有一行项目需要像页脚一样居中时。

这个思路是使父容器成为flexbox并使用flex属性将元素沿水平和垂直方向居中，如下所示。

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

当有多个元素需要一个在另一个元素上方堆叠，并使该元素堆叠在其中心时，那我们就:

flex-direction: column;

3. 使用负边距

什么时候用：

当元素的高度和宽度已知时。

这个思路是再次使用类似于变换技术的绝对定位，但应用的是元素宽度和高度一半的负边距而不是平移。

width: 200px; /* CSS 变量 */
height: 100px; /* CSS 变量 */
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -50px -100px; 
}

4. 使用网格

这玩意说实话我不太会,经查阅使用方法如下

什么时候用：

当只有一个子元素需要居中时。

这个思路是创建一个网格容器并将边距设置为auto。在非网格容器中，当margin设置为auto时，margin-top和bottom取值为0。但是，在网格容器中，margin-top和bottom平均分配可用空间，从而使元素居中

.parent {
  display: grid;
}
.center {
  margin: auto;
}

另一种使用网格来实现居中的方法是：

.parent {
  display: grid;
  place-items: center;
}

5. 使用填充

注意嗷注意!!! 不建议将此技术用于中心对齐，但它也是可行的。

什么时候用：

当父元素的高度已知或者固定时；
当中心元素的高度为弹性可变时。

这个思路是为已知固定高度的容器设置固定的垂直填充，并允许子元素占据最大高度和自动边距。

.parent {
  height: 600px; 
  padding: 200px 0; 
}
.center{
  margin: 0 auto;
  height: 100%; 
}

6. 使用表格单元格

这个现在用得比较少，但是也能用

这个思路是使用display强制父级表现得像一个表格单元格。然后使用vertical align属性进行垂直居中，使用margin auto进行水平居中。

.parent {
  display: table-cell;
  vertical-align: middle;
}
.center{
  margin: auto;
}

以上就是居中对齐元素的6种方法了

然后

另外我们再讲一讲——水平居中

水平居中通常用于标题样式和页脚，并结合均匀的填充或边距。

使用文本对齐

什么时候用：

当中心元素为文本内容或者inline-*类型元素时；
linline-*包括inline、inline-block、inline-flex、inline-table等。
```
.parent {
   text-align: center;
}
```
据尝试它还可以居中块类型子元素，但我不是很推荐,如果你这么搞出问题了很难改!