css水平居中对齐怎么写 |css div按钮切换

CSS水平居中对齐是网页设计中常用的技巧之一，可以让页面看起来更加美观。下面来介绍几种常用的CSS水平居中对齐方法。 1. 使用text-align属性通过设置父元素的text-align属性为center，其内部的所有子元素就会自动水平居中对齐。示例代码：

<style>
.parent {
text-align: center;
}
</style>
<div class="parent">
<p>这是一个居中对齐的段落。</p>
</div>

2. 使用margin属性为了水平居中对齐一个元素，可以设置其左右margin的值为auto，并且将该元素的display属性设置为block。示例代码：

<style>
.child {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<div class="parent">
<p class="child">这是一个居中对齐的段落。</p>
</div>

3. 使用flex布局 Flex布局是CSS3中的新特性，可以使用它让子元素在容器中水平居中对齐。示例代码：

<style>
.parent {
display: flex;
justify-content: center;
}
</style>
<div class="parent">
<p>这是一个居中对齐的段落。</p>
</div>

以上就是几种常用的CSS水平居中对齐方法，以此帮助你让页面更加美观。