div上下左右居中.全面总结

这个使用line-height+inline-block做多行文字的垂直居中。

还有这个css 多列等高等宽布局

这个 css 让一个图片在固定的尺寸中上下左右居中object-fit

这个利用css3的transform实现垂直居中

这些都是可以实现的。

今天介绍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;

}