代码如何让盒子居中
常见问答
如何使用CSS让一个盒子水平居中显示？
我想让我的网页上的一个盒子元素在父容器中水平居中显示，应该使用哪些CSS属性？
使用CSS的水平居中技巧
可以通过设置盒子元素的宽度，然后对其父容器使用 text-align: center，或者对盒子元素设置 margin: 0 auto 来实现水平居中。此外，使用Flexbox布局时，对父容器设置 display: flex; justify-content: center; 也可以让子元素水平居中。
怎样让盒子元素在页面中垂直居中？
我希望页面中的一个盒子元素不仅水平居中，还能垂直居中，应该怎么做？
实现盒子的垂直居中的方法
使用Flexbox是实现垂直居中的简便方法，只需对父容器设置 display: flex; align-items: center; justify-content: center;。另一种方法是利用CSS Grid，将父容器设置为 display: grid; place-items: center;，这样子元素就能在水平方向和垂直方向同时居中。
有没有不使用Flexbox的情况下，让盒子居中的方法？
我想在不使用Flexbox的条件下，使盒子元素在父容器中水平和垂直居中，有什么推荐方案？
非Flexbox的居中方法推荐
可以考虑使用绝对定位配合变换属性实现居中。具体做法是，将父容器设置为相对定位，盒子设置为绝对定位，top: 50%; left: 50%; transform: translate(-50%, -50%)，这样盒子就会相对于父容器居中。在某些布局需求下，也可以结合表格布局或者使用行内块元素配合文本对齐方式。