在 CSS 中,有几种常用的办法能够将元素居中:
运用 margin: auto 属性,将元素的上下外边距设为 auto,这般就能够使元素在父容器内水平居中了。Copy code
.center {
width: 50%;
margin: 0 auto;
}
运用 text-align: center 属性,将元素的文本内容水平居中。Copy code
.center {
text-align: center;
}
运用 flexbox 布局,经过设置 display: flex 和 justify-content: center 属性,就能够将元素在父容器内水平居中了。Copy code
.parent {
display: flex;
justify-content: center;
}
运用 grid 布局,经过设置 display: grid 和 place-items: center 属性,就能够将元素在父容器内垂直水平居中了。Copy code
.parent {
display: