江苏龙网

  1. 首页 > 人文 > >

多个你不知道的 CSS 居中方案

水平居中内联元素要使内联元素（如链接 ， span 或img）居中 ， 使用 text-align: center 足够了 。
.desk {text-align: center;}
多个你不知道的 CSS 居中方案文章插图
对于多个内联元素 ， 也可以使用text-align：center:
.desk {text-align: center;}
多个你不知道的 CSS 居中方案文章插图
Flexbox使用 flexbox 也可以快速居中元素：
.desk {display: flex;justify-content: center;}对于多个内联的项目 ， 也可以正常工作：
多个你不知道的 CSS 居中方案文章插图
CSS Grid使用网格容器时 ， 图中的盘子将根据其网格区域居中 。 请注意 ， 除非将它们包裹在一个元素中 ， 否则这将不适用于多个盘子 。
.desk {display: grid;justify-content: center;}
多个你不知道的 CSS 居中方案文章插图
块元素Auto Margin宽度和高度已知的块元素可以通过设置margin-left:auto 和 margin-right:auto 居中元素 。
.plate {width: 120px;height: 120px;margin-left: auto;margin-right: auto;}
多个你不知道的 CSS 居中方案文章插图
对于多个块元素 ， 它们应该包装在一个元素中 ， 然后让这个父元素居中 。
.tray {display: flex;margin-left: auto;margin-right: auto;}
多个你不知道的 CSS 居中方案文章插图
Flexbox对于 flexbox 同样也是使用 justify-content:center 来居中元素：
.desk {display: flex;justify-content: center;}
多个你不知道的 CSS 居中方案文章插图
对于多个元素 ， 我们不需要将它们包裹在一个元素中 ， flexbox 可以将它们都居中 。
CSS定位通过绝对定位 ， 我们可以轻松地通过CSS transform将其水平居中 。
【多个你不知道的 CSS 居中方案】.plate {position: absolute;left: 50%;transform: translateX(-50%);}
多个你不知道的 CSS 居中方案文章插图
在已知元素宽度的情况下 ， 可以使用负边距代替CSS transform 。
.plate {position: absolute;left: 50%;margin-left: -60px;}垂直居中内联元素Vertical Padding
垂直居中元素最简单的方法之一是使用padding:
padding-top: 24px;padding-bottom: 24px;}
多个你不知道的 CSS 居中方案文章插图
Vertical Alignvertical-align属性可用于一个或多个元素 。
在此示例中 ， 叉子和刀子应与桌子垂直居中 。
.desk {text-align: center;}.plate,.fork,.knife {vertical-align: middle;}Flexbox为了对齐盘子 ， 叉子和刀 ， 我们可以使用 flexbox:
.desk {display: flex;justify-content: center;align-items: center;}
多个你不知道的 CSS 居中方案文章插图


推荐阅读


上一篇：iPhone准备做什么？iPhone6s起，更新迭代必减配

下一篇：京东联手步步高 电商收割区域零售商