/* 居中方式一:水平居中 */ body { display: flex; justify-content: center; } /* 居中方式二:垂直居中 */ .container { position: relative; } .item { position: absolute; top: 50%; transform: translateY(-50%); } /* 居中方式三:水平垂直居中 */ .container { display: flex; justify-content: center; align-items: center; }
以上是CSS中三种常见的居中方式。对于每种方式,需要注意添加对应的CSS属性。在实际开发中,应根据具体的需求选择不同的居中方式,以达到最佳的页面效果。