<body>
<div class="box">
<div class="con">我是2</div>
</div>
</body>
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;
}
元素的垂直居中对齐
1、内联块元素：
text-align：center；
linehigh：和父元素高度相同的高度值；
2、块级元素的垂直水平居中：
margin：auto（在父元素中水平居中）；
定位：子绝父相，margin：50%；margin：-（元素高度的一半）
扫一扫
1023
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
