CSS水平居中+垂直居中+水平/垂直居中的方法总结

 

目录

水平居中 

行内元素

 块级元素

方案一:(分宽度定不定两种情况)

方案二:使用定位属性

方案三:使用flexbox布局实现(宽度定不定都可以)

垂直居中

单行的行内元素

多行的行内元素

 块级元素

水平垂直居中

已知高度和宽度的元素

未知高度和宽度的元素

方案一:使用定位属性

方案二:使用flex布局实现


水平居中 

  • 行内元素

首先看它的父元素是不是块级元素,如果是,则直接给父元素设置 text-align: center; 

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center;
       }
</style>

<div id="father">
    <span id="son">我是行内元素</span>
</div>

如果不是,则先将其父元素设置为块级元素,再给父元素设置 text-align: center;

<style>
    #father {
        display: block;
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center;
       }
</style>

<span id="father">
    <span id="son">我是行内元素</span>
</span>

效果:


  •  块级元素

方案一:(分宽度定不定两种情况)

定宽度:需要谁居中,给其设置 margin: 0 auto; (作用:使盒子自己居中)

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }

    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        margin: 0 auto;
    }
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div>

效果:

 不定宽度:默认子元素的宽度和父元素一样,这时需要设置子元素为display: inline-block; 或 display: inline;即将其转换成行内块级/行内元素,给父元素设置 text-align: center; 

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        text-align: center;
    }

    #son {
        background-color: green;
        display: inline;
    }
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div>

效果:(将#son转换成行内元素,内容的高度撑起了#son的高度,设置高度无用)


方案二:使用定位属性

首先设置父元素为相对定位,再设置子元素为绝对定位,设置子元素的left:50%,即让子元素的左上角水平居中;

定宽度:设置绝对子元素的 margin-left: -元素宽度的一半px; 或者设置transform: translateX(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}

    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        margin-left: -50px;
}
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div>

不定宽度:利用css3新增属性transform: translateX(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}

    #son {
        height: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
}
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div>

效果:


方案三:使用flexbox布局实现(宽度定不定都可以)

使用flexbox布局,只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        justify-content: center;
    }

    #son {
        width: 100px;
        height: 100px;
        background-color: green;
    }
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div>

效果: 


垂直居中

  • 单行的行内元素

只需要设置单行行内元素的"行高等于盒子的高"即可;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }

    #son {
        background-color: green;
        height: 300px;
    }
</style>

<div id="father">
    <span id="son">我是单行的行内元素</span>
</div>

效果:

 


  • 多行的行内元素

使用给父元素设置display:table-cell;vertical-align: middle;属即可;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: table-cell;
        vertical-align:middle;
    }

    #son {
        background-color: green;
    }
</style>

<div id="father">
    <span id="son">我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素我是多行的行内元素</span>
</div>

效果:


  •  块级元素

方案一:使用定位

首先设置父元素为相对定位,再设置子元素为绝对定位,设置子元素的top: 50%,即让子元素的左上角垂直居中;

定高度:设置绝对子元素的 margin-top: -元素高度的一半px; 或者设置transform: translateY(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}

    #son {
        height: 100px;
        background-color: green;
        position: absolute;
        top: 50%;
        margin-top: -50px;
}
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div>

不定高度:利用css3新增属性transform: translateY(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}

    #son {
        width: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        transform: translateY(-50%);
}
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div>

效果:


方案二:使用flexbox布局实现(高度定不定都可以)

使用flexbox布局,只需要给待处理的块状元素的父元素添加属性 display: flex; align-items: center;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        align-items: center;
    }

    #son {
        width: 100px;
        height: 100px;
        background-color: green;
    }
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div>

效果: 


水平垂直居中

  • 已知高度和宽度的元素

方案一:设置父元素为相对定位,给子元素设置绝对定位,top: 0; right: 0; bottom: 0; left: 0; margin: auto;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}

    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
}
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div>

效果:


方案二:设置父元素为相对定位,给子元素设置绝对定位,left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}

    #son {
        width: 100px;
        height: 100px;
        background-color: green;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
}
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div>

效果:


  • 未知高度和宽度的元素

方案一:使用定位属性

设置父元素为相对定位,给子元素设置绝对定位,left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        position: relative;
}

    #son {
        background-color: green;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
}
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div>

效果:


方案二:使用flex布局实现

设置父元素为flex定位,justify-content: center; align-items: center;

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
        display: flex;
        justify-content: center;
        align-items: center;
}

    #son {
        background-color: green;
}
</style>

<div id="father">
    <div id="son">我是块级元素</div>
</div>

效果:

03-18
<think>好的,用户之前问过关于div没有设置宽度为什么会占满父容器的问题,现在又问了“居中”。我需要确定用户具体想要哪种居中,是水平居中垂直居中,还是两者都有。可能用户在前一个问题中涉及到了布局,现在想进一步了解如何调整元素的位置,尤其是居中。 首先,我得考虑用户可能的场景。用户可能是前端开发的初学者,或者是在做网页布局时遇到了困难。他们可能已经尝试过一些方法但没成功,或者想了解不同的居中技巧。需要覆盖水平居中垂直居中,以及不同情况下的解决方案,比如块级元素、行内元素、Flexbox、Grid等。 接下来,用户可能的需求包括文本居中、块级元素水平居中、Flexbox布局中的居中、绝对定位元素的居中,以及垂直居中的常见方法。需要确保回答结构清晰,分点说明,让用户容易理解和应用。 还要注意用户之前的问题涉及到CSS盒模型和块级元素的默认行为,所以在回答居中时,可以联系之前的上下文,比如在块级元素默认占满宽度的情况下如何居中。可能需要提到margin: auto的方法,以及Flexbox和Grid这些现代布局技术如何简化居中操作。 同时,要避免使用过于专业的术语,保持解释简单明了,并提供代码示例,帮助用户直接复制使用。需要检查不同方法的兼容性,但可能用户更关心的是常用且有效的方法,而不是过时的技巧。 最后,总结不同场景的最佳实践,帮助用户根据具体情况选择合适的方法。比如,对于简单的水平居中,使用margin: auto;对于复杂的布局,推荐Flexbox或Grid。这样用户可以根据自己的项目需求灵活应用。</think>在CSS中实现居中效果需要根据元素的**类型**和**布局场景**选择对应方案。以下是主流的居中实现方法分类详解: --- ### 一、水平居中通用方案 #### 1. 行内/行内块元素 ```css .parent { text-align: center; /* 父级容器设置 */ } ``` - 适用场景:文字、`<span>`、`<img>`等行内元素 #### 2. 块级元素 ```css .block { width: 200px; /* 必须定义宽度 */ margin: 0 auto; /* 左右外边距自动分配 */ } ``` - 必要条件:元素具有明确宽度 --- ### 二、垂直居中核心技巧 #### 1. 单行文本垂直居中 ```css .container { height: 100px; line-height: 100px; /* 行高等于容器高度 */ } ``` #### 2. 绝对定位元素 ```css .target { position: absolute; top: 50%; transform: translateY(-50%); /* 反向偏移自身高度50% */ } ``` --- ### 三、现代布局方案(推荐) #### 1. Flexbox布局 ```css .parent { display: flex; justify-content: center; /* 主轴居中 */ align-items: center; /* 交叉轴居中 */ } ``` - 优势:同时处理水平垂直居中 - 示例效果:父容器内所有子项整体居中 #### 2. Grid布局 ```css .parent { display: grid; place-items: center; /* 简写属性 */ } ``` - 现代浏览器支持度高 - 特别适合二维布局需求 --- ### 四、特殊场景处理 | 场景 | 解决方案 | |--------------------|----------------------------| | 浮动元素居中 | 外层包裹+margin auto | | 表格单元格居中 | vertical-align: middle | | 多行文本垂直居中 | padding等分上下空间 | --- ### 五、最佳实践建议 1. **优先选择Flexbox**:兼容性好(支持到IE10),代码简洁 2. **绝对定位方案**:适合弹窗等需要脱离文档流的元素 3. **传统方案适用场景**:需要兼容老旧浏览器时使用 通过组合这些方法,可以覆盖99%的居中需求。现代布局方案大幅简化了传统CSS的复杂性,建议重点掌握Flexbox与Grid的使用。
评论 36
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一只前端小菜鸟~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值