Flexbox是CSS的强大布局模型，它为我们提供了简单而灵活的方法来实现元素的水平和垂直居中。
上面的代码中，我们使用了Flexbox布局模型，通过将容器设置为弹性布局容器。和分别使内容在水平和垂直方向上居中。
另一种常用的方法是使用绝对定位和CSS的属性来实现元素的居中。
上面的代码中，我们将容器设置为相对定位，并通过和将元素的左上角定位到了容器的中心。然后，通过将元素向左和向上移动自身宽高的一半，从而实现元素在水平和垂直方向上的居中。
如果你在项目中已经使用了CSS的Grid布局，那么也可以很容易地实现元素的水平和垂直居中。
在上面的代码中，我们使用了Grid布局，通过将容器设置为网格容器。然后，通过将内容在网格容器中居中。
如果你需要让一个行内元素水平垂直居中，你可以使用将内容在水平方向上居中，然后使用属性设置和容器高度相等的行高来实现垂直居中。
在上面的代码中，我们将容器设置为文本居中，并设置行高和容器高度相等，从而实现行内元素的垂直居中。同时，为了让行内元素居中，我们还使用了和。
父级设置为相对定位，子级绝对定位 ，并且四个定位属性的值都设置了0，那么这时候如果子级没有设置宽高，则会被拉开到和父级一样宽高
这里子元素设置了宽高，所以宽高会按照我们的设置来显示，但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个它就可以上下左右都居中了
绝大多数情况下，设置父元素为相对定位， 子元素移动自身50%实现水平垂直居中
- 初始位置为方块1的位置
- 当设置left、top为50%的时候，内部子元素为方块2的位置
- 设置margin为负数时，使内部子元素到方块3的位置，即中间位置
这种方案不要求父元素的高度，也就是即使父元素的高度变化了，仍然可以保持在父元素的垂直居中位置，水平方向上是一样的操作,但是该方案需要知道子元素自身的宽高，但是我们可以通过下面transform属性进行移动
根据元素标签的性质，可以分为：
- 内联元素居中布局
- 块级元素居中布局
水平居中
- 行内元素可设置：text-align: center
- flex布局设置父元素：display: flex; justify-content: center
垂直居中
- 单行文本父元素确认高度：height === line-height
- 多行文本父元素确认高度：disaply: table-cell; vertical-align: middle
水平居中
- 定宽: margin: 0 auto
- 绝对定位+left:50%+margin:负自身一半
垂直居中
- position: absolute设置left、top、margin-left、margin-top(定高)
- display: table-cell
- transform: translate(x, y)
- flex(不定高，不定宽)
- grid(不定高，不定宽)，兼容性相对比较差
到此这篇关于CSS实现元素水平垂直居中的几种方法的文章就介绍到这了,更多相关CSS元素水平垂直居中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
到此这篇css grid布局居中（grid布局垂直居中）的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章，希望大家都能在编程的领域有一番成就！版权声明：
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！
转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/21128.html