备案控制台
开发者社区 开发与运维 文章 正文

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

2022-11-30 189
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： CSS水平居中+垂直居中+水平/垂直居中的方法总结

CSS水平居中+垂直居中+水平/垂直居中的方法总结_一只前端小菜鸟


分享一篇我的博客 （详细记载工作中遇到的问题）

前端工作四个月经验总结以及技术分享


水平居中

行内元素

首先看它的父元素是不是块级元素，如果是，则直接给父元素设置 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>


效果：

1024b19218af40c7a8a6290c6186518d.png

块级元素

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

定宽度：需要谁居中，给其设置 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>


效果：

1024b19218af40c7a8a6290c6186518d.png

不定宽度：默认子元素的宽度和父元素一样，这时需要设置子元素为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的高度，设置高度无用）

1024b19218af40c7a8a6290c6186518d.png


方案二：使用定位属性

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的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>



效果：

1024b19218af40c7a8a6290c6186518d.png

方案三：使用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>



效果：

1024b19218af40c7a8a6290c6186518d.png


垂直居中

单行的行内元素

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

<style>
    #father {
        width: 500px;
        height: 300px;
        background-color: skyblue;
    }
    #son {
        background-color: green;
        height: 300px;
    }
</style>
<div id="father">
    <span id="son">我是单行的行内元素</span>
</div>



效果：

1024b19218af40c7a8a6290c6186518d.png

多行的行内元素

使用给父元素设置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>

1024b19218af40c7a8a6290c6186518d.png

块级元素

方案一：使用定位

首先设置父元素为相对定位，再设置子元素为绝对定位，设置子元素的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>

效果：

1024b19218af40c7a8a6290c6186518d.png

方案二：使用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>


效果：

1024b19218af40c7a8a6290c6186518d.png


水平垂直居中

已知高度和宽度的元素

方案一：设置父元素为相对定位，给子元素设置绝对定位，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>


效果：

1024b19218af40c7a8a6290c6186518d.png



方案二：设置父元素为相对定位，给子元素设置绝对定位，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>


效果：

1024b19218af40c7a8a6290c6186518d.png


未知高度和宽度的元素

方案一：使用定位属性

设置父元素为相对定位，给子元素设置绝对定位，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>


效果：

1024b19218af40c7a8a6290c6186518d.png

方案二：使用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>


效果：

1024b19218af40c7a8a6290c6186518d.png


文章标签：
前端开发
关键词：
CSS方法
CSS水平
CSS水平居中垂直居中
CSS水平居中
CSS垂直居中
_揽
目录
相关文章
hnrk7epeorhrk
|
1天前
|
前端开发
技术经验分享：CSS画三角形(三种方法)
技术经验分享：CSS画三角形(三种方法)
hnrk7epeorhrk
5 0
艾尼麻麻
|
25天前
|
前端开发
CSS实现将垂直滚动条放置在左侧方法
CSS实现将垂直滚动条放置在左侧方法
艾尼麻麻
19 2
北原_春希
|
10天前
|
前端开发 容器
用CSS将文字超出部分变为省略号的方法
用CSS将文字超出部分变为省略号的方法
北原_春希
9 0
Goodluck-dys
|
1月前
|
前端开发 容器
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
css 中可以让文字在垂直和水平方向上重叠的两个属性是什么？
Goodluck-dys
17 1
xiaohua616
|
1月前
|
前端开发
css flex布局两个元素水平居中垂直居中
css flex布局两个元素水平居中垂直居中
xiaohua616
27 1
梦回故国楼台梦
|
1月前
|
前端开发
【专栏】在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法
【4月更文挑战第29天】本文介绍了在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法。首先，通过 `npm` 安装 less 或 sass 依赖，然后修改 `config-overrides.js` 配置文件以支持 less/sass 编译。接着，详细阐述如何使用 less/sass 编写样式。再者，安装 react-css-modules 并配置 webpack，使能样式模块化。最后，展示了如何结合使用 less/sass 和 react-css-modules，以提升前端开发的效率和代码质量。
梦回故国楼台梦
91 0
萌狼蓝天
|
前端开发
【前端】【样式】CSS居中的三种方式
【前端】【样式】CSS居中的三种方式
萌狼蓝天
67 1
染陌
|
前端开发
CSS 居中的几种方式
CSS 居中的几种方式
染陌
134 0
毛瑞
|
前端开发 容器
【基础】这15种CSS居中的方式，你都用过哪几种？
CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。
毛瑞
2678 0
半指温柔乐
|
前端开发 容器
第212天：15种CSS居中的方式，最全了
CSS居中是前端工程师经常要面对的问题，也是基本技能之一。今天有时间把CSS居中的方案整理了一下，目前包括水平居中，垂直居中及水平垂直居中方案共15种。如有漏掉的，还会陆续的补充进来，算做是一个备忘录吧。
半指温柔乐
2690 0