方法一: 使用flex布局
.container { display: flex; justify-content: center; /* 横向居中 */ align-items: center; /* 纵向居中 */ }
方法二: 使用绝对定位方式
.container { position: relative; } .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); /* 水平和垂直方向上水平居中 */ }
无论使用哪种方法,都可以将内容居中显示。如果你希望精细控制居中方式,可以结合上述两种方法进行使用。例如,在方法二的content样式中设置width和height属性,就可以实现更精准的布局控制。