乐趣区

关于css:多个CSS-居中方案你可能还不知道

jiezi

作者：Ahmad Shadeed
译者：前端小智
起源：ishadeed
挪动端浏览：https://mp.weixin.qq.com/s/kp…

点赞再看，微信搜寻【大迁世界】,B 站关注【前端小智】这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。

最近开源了一个 Vue 组件，还不够欠缺，欢送大家来一起欠缺它，也心愿大家能给个 star 反对一下，谢谢各位了。

github 地址：https://github.com/qq44924588…

程度居中

内联元素

要使内联元素（如链接，span 或img）居中，应用 text-align: center 足够了。

<div class="desk">
   <span class="plate"></span>
</div>
.desk {text-align: center;}

对于多个内联元素，也能够应用text-align：center:

<div class="desk">
   <span class="plate"></span>
   <span class="plate"></span>
</div>
.desk {text-align: center;}

Flexbox

应用 flexbox 也能够疾速居中元素：

.desk {
  display: flex;
  justify-content: center;
}

对于多个内联的我的项目，也能够失常工作：

CSS Grid

应用网格容器时，图中的盘子将依据其网格区域居中。请留神，除非将它们包裹在一个元素中，否则这将不适用于多个盘子。

.desk {
  display: grid;
  justify-content: center;
}

块元素

Auto Margin

宽度和高度已知的块元素能够通过设置margin-left:auto 和 margin-right:auto 居中元素。

.plate {
  width: 120px;
  height: 120px;
  margin-left: auto;
  margin-right: auto;
}

对于多个块元素，它们应该包装在一个元素中，而后让这个父元素居中。

.tray {
  display: flex;
  margin-left: auto;
  margin-right: auto;
}

Flexbox

对于 flexbox 同样也是应用 justify-content:center 来居中元素：

.desk {
  display: flex;
  justify-content: center;
}

对于多个元素，咱们不须要将它们包裹在一个元素中，flexbox 能够将它们都居中。

CSS 定位

通过相对定位，咱们能够轻松地通过 CSS transform将其程度居中。

.plate {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

在已知元素宽度的状况下，能够应用负边距代替 CSS transform。

.plate {
  position: absolute;
  left: 50%;
  margin-left: -60px;
}

垂直居中

内联元素

Vertical Padding

垂直居中元素最简略的办法之一是应用padding:

  padding-top: 24px;
  padding-bottom: 24px;
}

Vertical Align

vertical-align属性可用于一个或多个元素。

在此示例中，叉子和刀子应与桌子垂直居中。

.desk {text-align: center;}

.plate,
.fork,
.knife {vertical-align: middle;}

Flexbox

为了对齐盘子，叉子和刀，咱们能够应用 flexbox:

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

块元素

相对定位

通过相对定位元素，能够应用 CSS transform将元素垂直居中：

.plate {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

如果晓得元素高度，则能够应用负边距代替transform。

.plate {
  position: absolute;
  top: 50%;
  margin-top: -60px;
}

CSS Grid

应用 CSS 网格，咱们能够应用 align-items 将我的项目垂直于其网格区域居中。

.desk {
  display: grid;
  align-items: center;
}

程度垂直居中

内联元素

Padding 和 Text Align

.plate {
  text-align: center;
  padding-top: 24px;
  padding-bottom: 24px;
}

其余元素类型

相对定位

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

Flexbox

通过 justify-content:center 和 align-items:center 就能够将元素垂直程度居中：

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

CSS Grid

通过 place-items 属性就能够通过，它联合了 justify-content 和align-items:

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

代码部署后可能存在的 BUG 没法实时晓得，预先为了解决这些 BUG，花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://ishadeed.com/article/…

交换

文章每周继续更新，能够微信搜寻「大迁世界」第一工夫浏览和催更（比博客早一到两篇哟），本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录，整顿了很多我的文档，欢送 Star 和欠缺，大家面试能够参照考点温习，另外关注公众号，后盾回复 福利，即可看到福利，你懂的。

退出移动版