[分享]css中如何让内容居中

对于网页设计来说，让内容居中是非常重要的一个问题。CSS提供了多种方式来实现这一目标，本文将介绍其中几种方法。一、水平居中下面是一段HTML代码，我们想让其中的文字居中显示。 这里是要居中的文字 ...

对于网页设计来说，让内容居中是非常重要的一个问题。CSS提供了多种方式来实现这一目标，本文将介绍其中几种方法。
一、水平居中
下面是一段HTML代码，我们想让其中的文字居中显示。

 <div class="center">
        <p>这里是要居中的文字</p>
    </div> 

我们可以使用以下CSS代码来实现水平居中。

 .center {
        text-align: center;
    } 

这样，文字就会水平居中显示了。
二、垂直居中
如果我们想要让文字在垂直方向上居中显示，那么我们可以使用以下方法。
1. 利用表格布局
我们可以使用表格来实现垂直居中。

 <table style="height:100%">
        <tr>
            <td align="center" valign="middle">
                <p>这里是要居中的文字</p>
            </td>
        </tr>
    </table> 

在CSS中，我们需要设置html和body的高度为100%。

 html, body {
        height: 100%;
    } 

2. 使用Flexbox布局
Flexbox是CSS3中新增加的一种布局方式，它可以很方便地实现垂直居中。

 <div class="center-v">
        <p>这里是要居中的文字</p>
    </div> 

关键是CSS代码。

 .center-v {
        display: flex;
        align-items: center;
    } 

三、水平垂直居中
如果我们需要同时在水平和垂直方向上居中，可以结合以上两种方法进行实现。

 <div class="center-both">
        <p>这里是要居中的文字</p>
    </div> 

CSS代码：

 .center-both {
        display: flex;
        justify-content: center;
        align-items: center;
    } 

以上就是几种常见的居中方式，当然还有其他方法可以实现居中，读者可以继续探索。