css 块级元素 行内元素居中

CSS中居中对齐是一个常见的问题。居中对齐可以分为水平居中和垂直居中两种方式，又可以根据元素的类型分为块级元素和行内元素。

首先，先来介绍一下块级元素和行内元素的概念。块级元素指的是占据一整行的元素，比如div、h1、p等。而行内元素则指的是只占据自身大小的元素，比如span、a、em等。实际上，在CSS中，我们更习惯把块级元素和行内元素归为两类display类型，display属性值为block的即为块级元素，display属性值为inline的即为行内元素。

对于块级元素居中，可以通过设置margin属性值为auto实现水平居中，如下所示：

div{
    width:200px;
    height:100px;
    margin:0 auto;
}

但是，对于垂直居中，就要稍微麻烦一些。我们可以用flex布局来实现垂直居中，如下所示：

div{
    width:200px;
    height:100px;
    display:flex;
    justify-content:center;
    align-items:center;
}

而对于行内元素的居中，使用text-align和 line-height都可以实现水平垂直居中，如下所示：

span{
    display:inline-block;
    width:100px;
    height:100px;
    text-align:center;
    line-height:100px;
}

总而言之，CSS对于元素的居中对齐提供了多种方式，我们可以根据需要进行选择使用。