如何居中正常元素、浮动元素以及绝对定位元素

最新推荐文章于 2024-02-19 16:39:26 发布

sjinsa

最新推荐文章于 2024-02-19 16:39:26 发布

阅读量648

点赞数 1

分类专栏： CSS常见面试题文章标签：居中元素

本文链接：https://blog.csdn.net/sjinsa/article/details/70804694

版权

CSS常见面试题专栏收录该内容

16 篇文章 6 订阅

订阅专栏

一、元素水平居中

1.行内元素的水平居中（父元素设置text-align:center）

<body>
    <div style="width:250px;height:100px;background:#ccc;text-align:center;">
        <span>行内元素水平居中</span>
    </div>
</body>

效果图如下：这里写图片描述
2.块级元素水平居中（margin：0 auto）

<body>
<div style="width:250px;height:100px;border:1px solid #ccc;text-align:center;">
    <div style="width:100px;height:50px;border:1px solid red;margin:0 auto;">块级元素水平居中</div>
</div>
</body>

效果图如下：这里写图片描述

3.浮动元素水平居中
a.宽度不固定的浮动元素水平居中

<body>
<div class="outerbox">  
 <div class="innerbox">我是浮动的</div>  
</div> 
</body>

.outerbox{  
    border: 1px solid red; 
    float:left;   
    position:relative;/*相对定位*/   
    left:50%;   /*该值相对于包含块的宽度计算的，即body的宽度*/
}   
.innerbox{    
    border: 1px solid green;
    float:left;   
    position:relative;   
    right:50%;/*该值相对于包含块的宽度计算的，即外部div的宽度*/   
}

效果如下：这里写图片描述
外部和内部div的盒模型如下图所示：
外部div：
外部div的包含块为body，宽度为1350，left:50%，所以margin等于675px.
内部div：
内部div的包含块为外部div，外部div宽度为82px，right:50%，所以margin为41px;

b.宽度固定的浮动元素水平居中

<body>
 <div class="floatBox">我是浮动的</div> 
</body>

.floatBox{
    background-color:pink; /*方便看效果 */    
    width:500px ;   
    height:300px; /*高度可以不设*/  
    margin: -150px 0 0 -250px; /*使用marin向左移动250px，保证元素居中*/  
    position:relative;   /*相对定位*/  
    left:50%;  
    top:50%;  
}

4.绝对定位元素水平居中

.center{  
    position: absolute; /*绝对定位*/  
    width: 300px;  
    height:100px;  
    background: red;  
    margin: 0 auto; /*水平居中*/  
    left: 0; /*此处不能省略，且为0*/  
    right: 0; /*此处不能省略，且为0*/  
}

盒模型如下图所示：这里写图片描述
因div有固定的宽度并且position:absolute;left:0;right:0，所以margin:0 auto时会根据屏幕大小自动算出左右margin。

** 经验分享：水平居中的主要属性有
1. text-align:center;
2. margin:0 auto
3. position:relative|absolute; left:50%; **

二、元素垂直居中

1.行内元素垂直居中（height与line-height值相等）

<span>行内元素垂直居中</span>

span{
    display: block;
    background: red;
    height:100px;
    line-height: 100px;
}

效果图如下：这里写图片描述
2.块级元素垂直居中（height与line-height值相等）
a.父元素高度不确定的情况
父元素的padding-top和padding-bottom一样
例如：

<div class="outerbox">
    <div class="innerbox"></div>
</div>

.outerbox{  
    border: 1px solid red;
    width: 300px;
    padding-top:20px;
    padding-bottom:20px; 
}   
.innerbox{    
    border: 1px solid green;
    width:100px;
    height:50px;    
}

效果如下：
这里写图片描述

b.父元素高度确定的情况
第一步：父元素height与line-height设置相等；
第二步：需要垂直居中的元素设置以下css属性

   vertical-align:middle;/*垂直居中对齐*/
   display:inline-block;/*块级元素转换为行内元素*/

例如：

<div class="outerbox">
    <div class="innerbox"></div>
</div>

.outerbox{  
    border: 1px solid red;
    width: 300px;
    height:100px;  
    line-height: 100px;  
}   
.innerbox{    
    border: 1px solid green;
    width:100px;
    height:50px;
    vertical-align: middle;
    display: inline-block;
}