CSS设置水平垂直居中的7种方法
发布时间：2024-03-19 08:45:33 作者：还是大剑师兰特 
我要评论
我要评论CSS中内容居中的方法有很多种，具体取决于您想要居中的内容是什么类型的元素以及是在什么情况下居中,这篇文章主要为大家整理了常用的7种方法，感兴趣的小伙伴可以跟随小编一起学习一下
（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
CSS中内容居中的方法有很多种，具体取决于您想要居中的内容是什么类型的元素以及是在什么情况下居中。以下是一些常见方法及代码示例：
1. 水平居中 - 文本或行内元素
使用 text-align 属性
.parent {
text-align: center; /* 子元素如果是内联或内联块元素，将会水平居中 */
}<!-- HTML --> <div class="parent"> <p>这是要居中的文本</p> <img src="http://9i0i.com/pic.php?p=image.jpg" alt="图片"> </div>
2. 水平居中 - 块级元素
使用 margin: 0 auto
.child {
width: 300px; /* 需要给定一个宽度 */
margin: 0 auto; /* 左右外边距自动分配 */
}<!-- HTML --> <div class="parent"> <div class="child">这是要居中的块级元素</div> </div>
3. 使用 Flexbox
.parent {
display: flex;
justify-content: center; /* 水平居中 */
}<!-- HTML --> <div class="parent"> <div class="child">这是要居中的任何元素</div> </div>
4. 垂直居中 - 单行文本
使用 line-height
.parent {
height: 100px; /* 给定一个高度 */
}
???????.child {
line-height: 100px; /* 与父元素高度相同 */
}<!-- HTML --> <div class="parent"> <p class="child">这是单行垂直居中的文本</p> </div>
5. 垂直居中 - 多行文本和块级元素
使用 Flexbox
.parent {
display: flex;
flex-direction: column;
justify-content: center; /* 垂直居中 */
}<!-- HTML --> <div class="parent"> <div class="child">这是多行垂直居中的内容</div> </div>
6. 水平和垂直居中 - Flexbox 或 Grid
Flexbox 方式
.parent {
display: flex;
justify-content: center;
align-items: center; /* 垂直居中 */
}<!-- HTML --> <div class="parent"> <div class="child">水平和垂直居中</div> </div>
Grid 方式
.parent {
display: grid;
place-items: center; /* 这相当于 align-items: center 和 justify-items: center 的简写 */
}<!-- HTML --> <div class="parent"> <div class="child">使用Grid布局实现水平和垂直居中</div> </div>
7. 使用 position 和 transform
当元素尺寸未知时，可以使用此方法。
.parent {
position: relative;
}
???????.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}<!-- HTML --> <div class="parent"> <div class="child">无论尺寸如何都会水平和垂直居中</div> </div>
这些是CSS中最常用的居中方法，根据实际需求选择合适的策略。
以上就是CSS设置水平垂直居中的7种方法的详细内容，更多关于CSS设置水平垂直居中的资料请关注程序员之家其它相关文章！
相关文章
本文主要介绍了CSS子盒子水平和垂直居中的五种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习2022-07-19
这篇文章主要介绍了使用CSS实现盒子水平垂直居中的方法(8种)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2020-11-11- 这篇文章主要介绍了CSS实现子元素div水平垂直居中的示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2020-09-03
这篇文章主要介绍了手把手教你CSS水平、垂直居中的10种方式(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着2019-11-07- 这篇文章主要介绍了css常用元素水平垂直居中方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习2019-08-09
- 这篇文章主要介绍了CSS水平垂直居中解决方案(6种)的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-02-10
- 本文给大家分享CSS 垂直水平居中的5种最佳解决方案以及各自的优缺点，本文给大家介绍的非常详细，具有参考借鉴价值，需要的朋友参考下吧2018-01-11
- 这篇文章主要介绍了CSS水平垂直居中的几种方法总结,垂直居中是布局中十分常见的效果之一,本文介绍了几种方法，有兴趣的可以了解一下。2016-12-19
- 下面小编就为大家带来一篇浅析CSS实现水平垂直同时居中的5种思路。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧2016-04-28
- 这篇文章主要介绍了CSS中的垂直和水平居中,几乎囊括了各种板式居中的需求,非常推荐!需要的朋友可以参考下2015-07-09
最新评论