css实现垂直居中的几种方式

已于 2025-01-10 01:02:31 修改
阅读量1.5w 收藏 67
点赞数 9
分类专栏： html+css 工作记 文章标签： html5 css3
于 2021-09-28 16:09:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37347273/article/details/120531170
版权
本文详细介绍了使用CSS实现元素垂直居中的四种常见方法，包括单行元素、文本、已知高度块级元素和未知高度块级元素的垂直居中布局。通过设置line-height、display:flex、position绝对定位、transform属性以及视口单位等技术，实现不同场景下的垂直居中效果。这些技巧对于前端开发者优化网页布局具有实用价值。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

css布局 实现垂直居中的几种方式

<div class="parent">
  <div class="content">内容垂直居中</div>
</div>

一、单行元素垂直居中

1、行内元素 父元素的height与line-heigth的值相等，让行内元素垂直居中

2、行内元素 vertical-align: middle; line-height 进行垂直居中

二、对文本进行垂直居中

1、flex居中，适合各种场景 （优选）
通过display:flex;配合align-items和justify-content实现文本居中

.content{
   
	display: flex;
	align-items: center;
	justify-content: center;
}

三、对已知高度块级元素进行垂直居中

1、绝对定位，配合top:50%和负margin-top(元素高度一半)进行垂直居中

.content{
   
	position: absolute;
	top: 50%;
	//left: 50%
最低0.47元/天 解锁文章
DIV+CSS垂直居中一个浮动元素
09-25
对于页面上的块级元素，只须定宽及设置margin:auto 0;即可在垂直上居中，但对于浮动的元素垂直居中是无效的。那么我们如何来处理这个问题呢，今天我们来探讨下。
CSS实现垂直居中的几种方法
09-25
本文将介绍几种有效的CSS垂直居中方法，以便开发者可以根据具体场景选择适合的方法。 1. 表格单元格方式 这种方法通过将容器设置为表格样式，然后将子元素设置为表格单元格并应用`vertical-align: middle`来实现...
CSS代码(四)：float元素的垂直居中
热门推荐
甘焕的博客
07-09 3万+
在前端程序的开发中，经常会遇到将float元素垂直居中的应用场景，并且结合的场景非常之多，如float元素与inline元素、float元素与float元素、float元素与block元素以及它们的综合应用场景，在大部分的情况下，采用的方案有如下三种： 1. 采用flex布局； 2. 综合运用line-height、margin与padding； 3. 综合运用相对定位与绝对定位；第一种方案，
CSS如何实现元素的垂直居中
最新发布
太阳与星辰的博客
03-24 467
CSS如何实现元素的垂直居中
【前端中css基础——系列2】css中浮动与垂直居中显示
让程序飞会的博客
05-29 465
文章目录一、浮动1.1 浮动的定义：1.2 浮动应用场景：1.3 清除浮动：1.3.1 为什么要清除浮动1.3.2 清除浮动方法（1）额外标签法：（2）父级添加overflow法：（3）使用after伪元素清除浮动：二、垂直居中显示2.1 position元素已知宽度2.2 position transform元素未知宽度2.3 flex布局2.4 table-cell布局 一、浮动 1.1 浮动的定义： 给元素的float属性赋值后，就是脱离文档流进行左右浮动，紧贴着父元素（默认为文本区域）的左右边
几个经典的css技巧
zzlnet的专栏
12-29 130
使用 line-height 垂直居中 line-height:24px;     使用固定宽度的容器并且需要一行垂直居中时，使用 line-height 即可（高度与父层容器一致） 清除容器浮动 #main { overflow:hidden; }     不让链接折行 a { white-space:nowrap; }     上面的设定就能避免链接...
css垂直居中浮动元素
simper_boy的博客
08-09 3076
#div1{ width:200px; height:200px; position:absolute;//父元素要相对定位 left:50%; top:50%; margin-left:-100px; margin-top:-100px; } #div2{ width:200px; height:200px; position:absolute;//父元素要相对定位 ...
CSS 实现垂直居中的几种方法(必看)
12-13
最近在学关系型数据库相关，MySQL 和 Postgre,捎带着学了 PHP，为了练手这几天就忙着自己搭博客，项目...但是良辰今天想聊的是 CSS 垂直居中的方法，下面是萌萌的分割线。神马？你敢说不萌？ •方式一 ：table 布局方法
CSS水平垂直居中的几种方法总结
09-24
以下就是CSS实现水平垂直居中的几种常见方法： 1. 利用margin:auto实现居中 这是一种常见的居中方式，通常用于块级元素。通过设置元素的position属性为relative，并把left和top属性设为0，再将margin设为auto，...
css 垂直居中的几种实现方法
12-13
今天重新整理一下思路，说说前端在实现页面元素垂直居中的几种思路： 一、利用 position 和负边距 利用绝对定位，让元素的顶部与居中线对齐，再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个...
CSS——如何垂直居中一个浮动元素 or img图片
Bonsoir777的博客
07-07 1095
本文主要介绍如何利用css垂直居中一个浮动元素 or img图片
css如何让浮动元素水平居中
12-29
对于定宽的非浮动元素我们可以在CSS中用 margin:0 auto 进行水平居中，对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题。解决水平居中问题有很多种方法，下面先给大家分享一下三种方法，希望能帮助到大家。 方法一： 1、HTML 部分： <div class=box> <p>我是浮动的</p> <p>我也是居中的</p> </div> 2、CSS 部分： .box{ float:left; position:relative; left:50%; } p{ float:left; position:relative; right:50%; }
css让元素水平垂直居中
小耳朵晨晨
09-29 733
利用flex布局 /* 无需知道被居中元素的宽高 */ .container { display: flex; align-items: center; justify-content: center; } 利用absolute+transform /* 无需知道被居中元素的宽高 */ /* 设置父元素非 `static` 定位 */ .containe...
css垂直居中的几种方法
k_shl_2011的博客
04-22 705
我相信每个前端新手都会遇到垂直居中的问题，感觉写的css就是垂直居中，但是没有居中啊。 首先我要说的是不要迷信 vertical-align: middle; 这个东西还挺复杂，要是想仔细了解，建议搜索一下张鑫旭大神的博客和视频教程。
css基础 CSS 布局 – Overflow、Float 浮动、CSS 布局 – 水平 垂直居中对齐
wgchen
04-26 2659
阅读目录CSS 布局 – Overflowoverflow: visibleoverflow: hiddenoverflow: scrolloverflow: autoverflow-x 和 overflow-y所有 CSS Overflow 属性CSS Float 浮动float 属性元素怎样浮动彼此相邻的浮动元素清除浮动 – 使用 clear什么是浮动布局浮动布局优点浮动布局缺点清除浮动的方式CSS 布局 – 水平 垂直居中对齐文本居中对齐图片居中对齐左右对齐 – 使用定位方式左右对齐 – 使用 flo
如何垂直居中一个浮动元素？
LuckXinXin的博客
02-26 245
//方法一：已知元素的宽高 //方法二：未知元素的宽高 那么，如何垂直居中一个img？（用更简便的方法。）
垂直居中一个浮动元素
01-05 397
场景：在一个固定高度的div中，有一个浮动的元素，需要将这个浮动元素垂直居中。 原始代码如下: .wrapper{ width: 400px; height: 300px; background-color: #1f8dd6; } button{
浮动元素的垂直居中问题
stone10086的博客
07-29 801
// 方法一：已知元素的高宽 #div1{ background-color:#6699FF; width:200px; height:200px; position: absolute; //父元素需要相对定位 top: 50%; left: 50%; margin-top:-100px ; //二分之一的 height，width margin-left: -100px; }//方法二:未知元素
关于浮动元素垂直居中的问题
weixin_30632899的博客
11-22 182
两种浮动元素垂直居中的情况: 父盒子有宽高; 父盒子没有宽高下面时 HTML 中的代码: 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>浮动元素垂直居中</title> ...
css怎么实现垂直水平居中的几种方式
05-30
在Web开发中，垂直和水平居中是常见的布局需求。以下是几种常用的实现方式： 1. 使用Flexbox布局 Flexbox布局是CSS3中新增的一种布局方式，可以很方便地实现垂直和水平居中。具体实现方式如下： ```css .container { display: flex; justify-content: center; /* 水平居中 */ align-items: center; /* 垂直居中 */ } ``` 2. 使用position和transform属性 使用position和transform属性也可以实现垂直和水平居中。具体实现方式如下： ```css .container { position: relative; } .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 在上面的代码中，我们将容器的position属性设置为relative，将要居中的元素的position属性设置为absolute，并设置top、left和transform属性。 3. 使用table和table-cell布局 使用table和table-cell布局也可以实现垂直和水平居中。具体实现方式如下： ```css .container { display: table; } .center { display: table-cell; vertical-align: middle; /* 垂直居中 */ text-align: center; /* 水平居中 */ } ``` 在上面的代码中，我们将容器的display属性设置为table，将要居中的元素的display属性设置为table-cell，并设置vertical-align和text-align属性。 以上是几种常用的实现方式，可以根据具体的需求选择合适的方式实现垂直和水平居中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值