css 中元素居中的方式有哪些？
<div style="color: black; text-align: left; margin-bottom: 10px;"><span style="color: black;">
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">在 CSS 中，有几种常用的<span style="color: black;">办法</span><span style="color: black;">能够</span>将元素居中：</p><span style="color: black;">运用</span> margin: auto 属性，将元素的<span style="color: black;">上下</span>外边距设为 auto，<span style="color: black;">这般</span>就<span style="color: black;">能够</span>使元素在父容器内水平居中了。<div style="color: black; text-align: left; margin-bottom: 10px;">Copy code
.center {
width: 50%;
margin: 0 auto;
}</div><span style="color: black;">运用</span> text-align: center 属性，将元素的文本内容水平居中。<div style="color: black; text-align: left; margin-bottom: 10px;">Copy code
.center {
text-align: center;
}</div><span style="color: black;">运用</span> flexbox 布局，<span style="color: black;">经过</span>设置 display: flex 和 justify-content: center 属性，就<span style="color: black;">能够</span>将元素在父容器内水平居中了。<div style="color: black; text-align: left; margin-bottom: 10px;">Copy code
.parent {
display: flex;
justify-content: center;
}</div><span style="color: black;">运用</span> grid 布局，<span style="color: black;">经过</span>设置 display: grid 和 place-items: center 属性，就<span style="color: black;">能够</span>将元素在父容器内垂直水平居中了。<div style="color: black; text-align: left; margin-bottom: 10px;">Copy code
.parent {
display:</div>
</span></div>
页:
[1]