这个使用line-height+inline-block做多行文字的垂直居中。
还有这个css 多列等高等宽布局
这个 css 让一个图片在固定的尺寸中上下左右居中object-fit
这些都是可以实现的。
今天介绍display:flex这个属性。在未知div宽高时,用这种方法比较方便。
我们知道display:flex.用在一行多列元素进行排列。
父元素 display:flex;子元素如果都设置。flex:1.代表所有子元素所在的比例都是一样的。这样即使页面缩小每个子元素占的比例缩小但是不会换行。
下面我们用这个属性实现上下左右居中
<div class="box">
<div class="content">
数名消息人士证实,作为公司历史上第三次组织架构调整的后续动作之一,2018年12月内部员工大会后,腾讯开始裁撤一批中层干部(下简称“中干”)。腾讯中干主要包括助理总经理、副总经理、总经理级别,有时一些副总裁也被认为在中干范围内。
</div>
</div>
.box{
display:flex;
border: 1px solid #ccc;
height: 200px;
}
.box .content{
margin:auto;
}