前端面试CSS相关（一）

<div class="container">
  <div class="item" style="width: 100px; height: 100px; background: #999;">
    块状元素
  </div>
</div>

<div class="container">
  <div class="item">不定高宽的块状元素</div>
</div>

<div class="container">
  <span class="item">行内元素</span>
</div>

<style>
    .container {
        position: relative;
        height: 20rem;
        background: #ccc;
        margin: 1rem;
     }

    .item {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
</style>

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

    height: 20rem;
    background: #ccc;
    margin: 1rem;
 }

.item {
    background: pink;
 }

.container {
            display: grid;
            place-items: center;

            height: 20rem;
            background: #ccc;
            margin: 1rem;
        }

        .item {
            background: pink;
        }