前端面试系列-CSS基础-div水平垂直居中&&文本居中(单行文字、多行文字)

最新推荐文章于 2021-07-05 11:08:42 发布

LYFlied

最新推荐文章于 2021-07-05 11:08:42 发布

阅读量2.5k

点赞数 6

分类专栏： css 文章标签： css html css3 面试 flex

本文链接：https://blog.csdn.net/qq_39903567/article/details/115263277

版权

这篇博客详细介绍了CSS中实现div水平垂直居中和文本垂直居中的多种方法，包括使用flex布局、position定位、table-cell、line-height和vertical-align，以及display: table-cell和align-items:center等。内容覆盖了不同场景下的居中解决方案，适用于前端开发者和面试准备。

摘要由CSDN通过智能技术生成

一、div水平垂直居中

1.flex

flex的详细介绍和应用可以看：
Flex(弹性布局)实现五大常用布局

<div class="box">        
    <div class="context"></div>    
</div>

 .box{            
        width: 300px;            
        height: 300px;           
        background-color: #ccc;            
        display: flex;            
        justify-content: center;//水平居中
        align-items: center;//垂直居中
    }        
    .box .context{            
        width: 100px;            
        height: 100px;            
        background-color: blue;        
    }

2.position （元素已知宽高）

父元素设置为：position: relative;
子元素设置为：position: absolute;
子元素 left: 50%; top: 50%; (left、top百分比基于父元素)
然后margin负的子元素自身宽高度的一半距离就可以实现

<div class="box">        
    <div class="context"></div>    
</div>

 .box{            
        width: 300px;            
        height: 300px;            
        background-color: red;            
        position: relative;        
    }        
    .box .context{            
        width: 100px;            
        height: 100px;