Posted on | by liu
CSS 必备技能之一就是居中和居右的实现。在日常开发中，大家经常需要把元素居中或者居右，因此熟练掌握这些技巧非常重要。
## 居右
首先来看居右的实现。大家可以使用 `text-align: right` 属性来实现文本居右，或者使用 `margin-left: auto` 和 `margin-right: 0` 属性把元素居右。
例如，下面的代码可以将一个块元素居右：
“`html
<div class="right">
这是要居右的块级元素。
</div>
“`css
.right {
margin-left: auto;
margin-right: 0;
}
“`
代码解释：
– `margin-left: auto;` 是关键。这使得左边的外边距自动填充剩余空间，从而把元素居右。
## 居中
接下来是居中的实现。大家可以使用 `text-align: center` 属性来实现文本居中，或者使用 `margin: auto` 把元素居中。
例如，下面的代码可以将一个块元素居中：
“`html
<div class="center">
这是要居中的块级元素。
</div>
“`
“`css
.center {
margin: auto;
}
“`
代码解释：
– `margin: auto;` 是关键。它使得左、右外边距都自动填充剩余空间，从而把元素居中。
综上所述，大家可以通过设置 `text-align` 或者 `margin` 属性的值来实现元素的居右和居中。这些技巧非常实用，可以让大家的网页更加美观和易读。