感谢 chatGPT 的回答:
- 使用
margin: 0 auto
实现居中:.centered-element { margin: 0 auto; }
- 使用
text-align: center
实现居中:.centered-element { text-align: center; }
- 使用
flex
布局实现居中:.centered-element { display: flex; justify-content: center; align-items: center; }
- 使用
absolute
定位实现居中:.centered-element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
- 使用
grid
布局实现居中:.centered-element { display: grid; justify-content: center; align-items: center; /* place-items: center; /* 上面两句可以用这一句替换 */ }