每日一道面试题 -- css居中的方式

Q：css 中居中的方式有哪几种？
A：主要有以下几种：

1. 水平居中

1.1 内联元素水平居中

利用text-align:center 来实现块级元素内部的内联元素水平居中。

此方法对内联元素(inline),inline-block，inline-table 都有作用

p{
   
	width:200px;
    height:200px;
    border:2px dashed #f69c55;
	text-align:center; // p 标签下面的元素水平居中
}

<p>
    <span>我居中了吗？</span>
  </p>

结果：

1.2 块级元素水平居中：需要设置适当的width

使用 margin: 0 auto

 div {
   
    height:100px;
    border: 2px dashed #f69c55;
}
.center-block {
   
    margin: 0 auto;
    width: 8rem;
    padding:1rem;
    color:#fff;
    background:#000;
}

<div>
    <p class="center-block">
        简单不先于复杂，而是在复杂之后。
    </p>
</div>

1.3 多个块级元素水平居中

例如：多个div 在一个盒子里面 水平居中

1.3.1 利用 inline-block

.container{
   
	text-align:center;
}
.inner-box{
   
	display:inline-block;
}

.container {
   
    height:100px;
    padding: 8px;
    text-align: center;
    border