[分享]css3单行和多行居中

在CSS3中，我们可以使用textalign属性来让单行的文本水平居中，也可以使用display和margin属性来让多行的文本水平和垂直居中。单行居中对于单行的文本，我们可以将textalign属性...

在CSS3中，我们可以使用text-align属性来让单行的文本水平居中，也可以使用display和margin属性来让多行的文本水平和垂直居中。

单行居中

对于单行的文本，我们可以将text-align属性设置为center来让文本水平居中。

 p{
        text-align: center;
    } 

上述代码将所有段落的文本水平居中。

多行居中

对于多行的文本，我们可以使用display和margin属性来让文本水平和垂直居中。具体来说，我们可以将display设置为table，将margin设置为auto，并设置元素的高度和行高。

 p{
        display: table;
        margin: auto;
        height: 100px;
        line-height: 100px;
    } 

上述代码将段落元素的外层容器设置为table，使其具有表格的居中效果。同时将margin设置为auto，使其水平居中。由于普通的p标签不能设置高度和行高，我们使用外层容器来实现。具体地，我们将外层容器的高度和行高设置为相同的值，例如100px。这样一来，文本就能够在容器内垂直居中了。

总结

CSS3提供了多种方式让文本水平和垂直居中。无论是单行还是多行文本，我们都可以使用text-align、display、margin和line-height等属性来实现居中效果。