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

深藏阁楼爱情的钟 2023-02-10 05:23 9阅读 0赞

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

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

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

这个[利用css3的transform实现垂直居中][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;

[line-height_inline-block]: https://blog.csdn.net/qq_33769914/article/details/88709639?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158996007719724843343649%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=158996007719724843343649&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_v25-1-88709639.nonecase&utm_term=div%E4%B8%8A%E4%B8%8B%E5%B7%A6%E5%8F%B3%E5%B1%85%E4%B8%AD
[css]: https://blog.csdn.net/qq_33769914/article/details/97894082?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158996007719724843343649%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=158996007719724843343649&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_v25-2-97894082.nonecase&utm_term=div%E4%B8%8A%E4%B8%8B%E5%B7%A6%E5%8F%B3%E5%B1%85%E4%B8%AD
[css _object-fit]: https://blog.csdn.net/qq_33769914/article/details/97915338?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522158996130319195264549068%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=158996130319195264549068&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v2~rank_v25-6-97915338.nonecase&utm_term=%E5%B1%85%E4%B8%AD
[css3_transform]: https://blog.csdn.net/qq_33769914/article/details/97786549