多个你不知道的 CSS 居中方案
水平居中内联元素要使内联元素（如链接 ， span 或img）居中 ， 使用 text-align: center 足够了 。
.desk {text-align: center;}
文章插图
对于多个内联元素 ， 也可以使用text-align：center:
.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将其水平居中 。
【多个你不知道的 CSS 居中方案】.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 Alignvertical-align属性可用于一个或多个元素 。
在此示例中 ， 叉子和刀子应与桌子垂直居中 。
.desk {text-align: center;}.plate,.fork,.knife {vertical-align: middle;}Flexbox为了对齐盘子 ， 叉子和刀 ， 我们可以使用 flexbox:
.desk {display: flex;justify-content: center;align-items: center;}
文章插图
推荐阅读
- 影像旗舰vivo X60系列正式开售 斩获多个线上平台双冠军
- 2020百度地图生态大会：开放平台十周年 为行业送出多个解决方案“大礼包”
- 还记得那个买苹果手机的小男孩吗？如今的他过得怎么样呢？
- 荣耀手环6简评：这是一个有“偏见”的产品
- 创维小湃盒子P3 Pro深度评测
- 被人删除还不知道？通过微信上方“+”号，就能知道是否被删好友
- 觉得自己听力一天不如一天？会是耳机惹得祸吗
- 你不知道的6个微信隐藏功能，个个超实用，学到就是涨知识
- 华为手机的这4个小功能，要是你还不知道，就真的有点OUT了
- 用户|不说不知道，微信“搜一搜”有这么多新玩法