代码如何让主体居中
常见问答
如何使用CSS使网页内容水平居中？
我想让网页中的主体内容在水平方向上居中展示，应该使用哪些CSS属性？
使用CSS的margin属性实现水平居中
可以将主体元素设置固定宽度，然后通过设置左右margin为auto来实现水平居中。例如：
.container {
width: 800px;
margin: 0 auto;
}
这样.container元素的内容会在页面中水平居中显示。
怎样让网页主体既水平又垂直居中？
我想让一个块级元素在网页中完美居中，无论窗口大小如何变化，应该怎样调整代码？
利用Flexbox实现水平和垂直方向居中
在父容器上启用Flexbox布局，使用属性justify-content和align-items均设置为center即可。例如：
.parent {
display: flex;
justify-content: center;
align-items: center;
height: 100vh; /* 确保父容器有高度 */
}
.child {
width: 300px;
height: 200px;
}
这样.child元素会在.parent容器内居中显示。
怎样用CSS Grid布局让内容在页面中居中？
有没有简单的CSS Grid方法可以让网页主体内容居中显示？
利用CSS Grid的place-items属性实现内容居中
将父容器设置为grid布局，并使用place-items属性设为center，可以实现内容居中。例如：
.container {
display: grid;
place-items: center;
height: 100vh;
}
这个设置会让.container中的内容在水平和垂直方向都居中展示。