CSS常见的居中方法

文本或行内元素居中

对于文本或行内元素,只需要在父级(因为text-align是可继承的)或元素本身添加text-align: center;即可,如果需要垂直居中的话只需要给子元素设置与父元素height值相同的line-height即可.

<div style="height: 40px; text-align: center; background-color: #ccc;">
  <span style="line-height: 40px;">text text</span>
</div>

块级元素居中

方法一：利用绝对定位实现元素垂直，水平居中显示：

需要知道元素的宽度和高度。通过设置需要定位的div元素为position: absolute, 然后通过top:50%, left:50%再加上margin-top: 负div高度的一半，margin-left:负div宽度的一半。也适用于img ,span等行内元素。

<div style="
  position: relative; 
  background-color: #ccc;
  width: 300px;
  height: 300px;
  ">
  <!-- 已知当前元素宽高时 -->
  <!-- <div style="
    width: 100px;
    height: 100px;
    background-color: #999;
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    /* 或 两者效果一样 */
    /* top: 50%;
    left: 50%;
    margin-top: -60px;
    margin-left: -60px; */
  ">
  </div> -->
  <!-- 未知当前元素宽高  推荐使用此方法 -->
  <div style="
    width: 100px;
    height: 100px;
    position: absolute;
    top: 50% ;
    left: 50% ;
    transform: translate(-50% , -50% );
    background-color: #999;
  ">
  </div>
</div>

方法二：利用margin: 0 auto实现块级元素水平居中

此方法只能只能水平居中。另外需注意，必须设置元素的宽度才能实现居中！利用此方法若要实现img等行内元素居中需要加上display: block。

<div style="
  background-color: #ccc;
  width: 300px;
  height: 300px;
  ">
  <div style="
    width: 100px;
    height: 100px;
    background-color: #999;
    margin: 0 auto;
  ">
  </div>
</div>

方法三：利用position和margin 实现垂直水平居中：

此方法不需要知道元素的宽高只需要给子元素设置position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;即可

<div style="
position: relative;
background-color: #ccc;
width: 300px;
height: 300px;
">
  <div style="
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background-color: #999;
  ">
  </div>
</div>

方法四：利用flex实现居中(推荐)：

此方法不需要知道元素的宽高,对比上面几种方法此方法最为简洁

<div style="
width: 300px;
height: 300px;
display: flex;
justify-content: center;
align-items: center;
background-color: #ccc;
">
  <div style="
  width: 100px;
  height: 100px;
  background-color: #999;
  ">
  </div>
</div>

方法四：根据display: table-cell 和 vertical-align: middle：

vertical-align这个属性会设置单元格框中的单元格内容的对齐方式,必须给子元素设置 display: inline-block;才能生效。

<div style="
width: 300px;
height: 300px;
display: table-cell;
text-align: center;
vertical-align: middle;
background-color: #ccc;
">
  <div style="
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #999;
  ">
  </div>
</div>

行内元素和块级元素

什么叫行内元素？

常见的span、a、lable、strong、b等html标签都是行内元素

默认情况下，行内元素均无法设置宽度、高度、上下方向margin的外边距等

当然，这不是绝对的，通过CSS可以让任何行内元素变成块级元素！比如：

1. span{display:block} /*span这时设置成了块级元素*/ 

什么叫块级元素？

常见的div、p、li、h1、h2、h3、h4等html标签都是块级元素

当然，这也不是绝对的，通过CSS可以让任何块级元素变成行内元素！比如：

1. h1{display:inline} /*h1这时设置成了行内元素*/