在HTML中怎么让div里的东西上下居中

上周，一位客户问我他如何将 HTML 内容集中在其中。
当我告诉他时，他立刻就明白了。
这说起来容易做起来难，但实际上可以使用 Flexbox 或 CSS Grid 来完成。

首先我们来说说Flexbox，这是一个非常方便的东西。
首先，您需要设置要居中的元素的高度，以便它有空间将内容居中。
然后将显示属性设置为 flex，这将打开 Flexbox 布局模式。
接下来，您使用 justify-content 来控制水平居中和垂直居中。
例如，您可以写
平均内容

这里我设置外层div的高度为5 00px，内层div的背景色为浅蓝色，内容为“中心居中内容”。
这样，无论多高，内容都会出现在中心。

如果您需要更复杂的布局或者您的页面设计很复杂，CSS Grid 可能更适合您。
Grid Layout 比 Flexbox 更强大，可以处理更复杂的布局。
如果您使用网格，您还可以设置一个 display: grid，然后对齐项目并将项目对齐到中心。
代码可能如下所示：
平均内容

此示例与 Flexbox 类似，只是将 Flexbox 替换为网格。

简而言之，这两种方法都可以让您轻松地将内容置于顶部和底部居中。
使用哪一种取决于您的项目需求和个人喜好。
无论如何，这是你的决定，两种方法都非常安全。
我还在想这两种布局方式未来会用于哪些更高级的应用场景。

html如何让其中一个div浮在另一个div上面

说白了，z-index相当于CSS中的“级别领导者”。
可以直接用整数来控制谁浮谁沉。
但重要的一点是，这个东西并不是孤立存在的。

先说最重要的：去年我们实现的项目中，3 000级页面打乱的时候，把z-index分组到9 9 9 9 并没有什么用，因为z-index只放置元素（相对/绝对/固定）。
如果不指定div的位置，就会默认和body同层，z-index再大也没用。
另一点是 z 索引是相对于非静态定义的最近祖先元素计算的。
例如，如果父级设置了 z-index：1 00，则即使子级的 z-index：2 00，也只会与父级进行排名。
不可能跨代跳过黄页和红块之间的战斗。
还有另一个重要的细节。
Z-index并没有解决覆盖区域重叠的问题。
如果你使用 z:5 0 光标将红色块放在前面，黄色块的额外 1 00 个像素仍然会覆盖红色块——行话中这称为“雪崩效应”。
事实上，前部的轻微延迟会降低整个后部的性能。

一开始我也以为z索引是一个全局层次结构的神器，但后来发现这是错误的。
必须与主题定位相结合才有效。
等等，还有别的事。
当多个z-index在同一级别发生冲突时，浏览器会随机调整最后一个。
说实话，这很令人困惑。

建议您不要只关注z-index，而是考虑分别设置位置（position）和级别（z-index）以获得最佳效果。
您认为将定位元素和非定位元素放在 z-index 中会让它变得更混乱吗？

html div位置怎么使用

绝对定位脱离文档流并参考最近的祖先元素进行定位。

例如，div{position:absolute;top:1 0px;left:2 0px;}将出现在父元素左上角1 0px和2 0px处。

祖先指的是视口而不指定位置。
记得包含top/right/bottom/left，否则定位无效。

如果父元素没有设置为relative/absolute/fixed，则会浮动到浏览器的左上角。

相对定位不会脱离文档流，而是参考其自身的原始位置进行移动。

例如，div{position:relative;left:2 0px;} 将出现在原始位置右侧 2 0px 处。

请注意，其他项目不会填充原始空间，并可能留下空白。

常用于微调或绝对定位参考。

固定位置与文档流分离，参考视口定位，并且在滚动时不会移动。

例如，div{position:fixed;top:0;left:0;}将布局在浏览器的左上角。

注意不要遮挡导航栏等重要内容。
移动终端可能位置异常。

浮动脱离了文档流，向左或向右流动，而其他内容则围绕其流动。

例如，div{float:left;} 将浮动到左行。

记得设置宽度，否则会填满父容器。

父容器的高度会塌陷，使用clearfix或者overflow去除。

顺序影响布局，通过调整HTML结构解决。

z-index 控制级别，默认情况下会覆盖绝对/固定元素。

绝对/固定与文档流分离，相对定位占据原来的位置。

筏板必须清理干净，否则父容器的高度会塌陷。

固定位置可能会阻止移动设备上的内容，请使用媒体查询进行调整。

绝对定位要考虑到主容器的尺寸变化，避免溢出。

自己掂量一下。