- 使用margin属性设置左右外边距为auto,上下外边距为0。
div { margin: 0 auto; }
- 使用flex布局,将父元素的display属性设置为flex,然后使用justify-content和align-items属性将子元素居中。
div { display: flex; justify-content: center; align-items: center; }
- 使用absolute定位,将左右外边距设置为auto,上下外边距设置为0,然后将left和right属性设置为0,将top和bottom属性设置为0。
div { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
- 使用grid布局,将父元素的display属性设置为grid,然后使用justify-items和align-items属性将子元素居中。
div { display: grid; justify-items: center; align-items: center; }