使用弹性盒实现垂直居中对齐

<body><div class="box"><div class="con">我是2</div></div></body>1.给两个div元素各设置一个宽高加上背景色，方便我们看，另外为了更清楚他们的位置关系，我们把外层的宽高设置的大一点，里面的元素不设大小，由内容撑开（但是如果没有内容，就一定要设大小，会直观一些）层：.b

四夕亭 — Ting-Luo

9552人浏览 · 2021-11-06 10:45:09

四夕亭 — Ting-Luo · 2021-11-06 10:45:09 发布

1.给两个div元素各设置一个宽高加上背景色，方便我们看，另外为了更清楚他们的位置关系，我们把外层的宽高设置的大一点，里面的元素不设大小，由内容撑开（但是如果没有内容，就一定要设大小，会直观一些）

层： .box {
            background-color: red;
            width: 300px;
            height: 300px;
  }

外层： .con {
                    background-color: aqua;

                    }

2，添加弹性盒元素：display：flex

先进行水平位置居中：justify-content：center

再进行垂直方向上的居中：align-items: center;

3，这已经能看到元素在水平方向上居中了，但是垂直方向上被拉伸的和父元素一样高了。

这时我们得让子元素不拉伸，所以给子元素添加：flex-shrink: 0;

注意：

这几个都是要加给父项的元素

最终的CSS代码：

                 .box {
                                background-color: #98FB98;
                                width: 300px;
                                height: 300px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }

.con {
                                background-color: aqua;
                                flex-shrink: 0;

}