CSDN中的 Markdown 不支持 HTML 渲染,需要查看效果请移步 CSS实现居中效果的方法总结
行内元素水平居中
text-align: center;
<style>
.parent {
background-color: aliceblue;
text-align: center;
}
.child {
background-color: orange;
}
</style>
<body>
<div class="parent">
<span class="child">content</span>
</div>
</body>
content
fit-content
<style>
.parent {
background-color: aliceblue;
width: fit-content;
margin: auto;
}
.child {
background-color: orange;
}
</style>
<body>
<div class="parent">
<span class="child">content</span>
</div>
</body>
content
行内元素和行内块元素垂直居中
<style>
.parent {
height: 200px;
line-height: 200px;
background-color: aliceblue;
}
.child {
background-color: orange;
}
</style>
<body>
<div class