如何让一个div里面的div垂直居中？

最新推荐文章于 2025-09-11 19:15:00 发布
转载 最新推荐文章于 2025-09-11 19:15:00 发布 · 807 阅读 · 0

本文介绍了一种使用CSS实现元素垂直居中的方法。通过设置特定的display属性，可以使内部元素在其父容器内实现精确的垂直居中效果。这种方法适用于需要精细布局控制的网页设计。
.vertical-container { display : - webkit - flex ; display : flex ; - webkit - align - items : center ; align - items : center ; - webkit - justify - content : center ; justify - content : center ; }


作者：陈裕皓
链接：https://www.zhihu.com/question/24475073/answer/53921272
来源：知乎

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

注：A套住B，在A写这个CSS则B垂直居中


使用css实现div垂直居中的示例
09-25
在网页设计中，让元素居中是常见的需求，特别是对于`div`这样的块级元素，垂直居中有时会显得较为复杂。本示例将详细解释如何使用CSS来实现`div`元素的垂直居中。 首先，我们要理解CSS布局的基本概念。在网页中，...
CSS网页布局：div垂直居中的各种方法
12-10
对于只有一个行高（line-height）的容器，设置其高度与行高相等可以实现垂直居中。例如： ```css div { height: 25px; line-height: 25px; overflow: hidden; } ``` 这种方法在大多数浏览器中都能正常工作...
div垂直居中屏幕
01-09
div垂直居中屏幕的方法，兼容IE6 7 8 Firefox
CSS 实现 div 水平垂直居中的 8 种实用方法：附代码与原理
前端圈边缘选手，擅长把 UI 稿 “翻译” 成代码，也擅长在 console.log 里写 “求救信号”。日常状态：要么在调像素级对齐，要么在查 “为什么这个样式只在我电脑上生效”。博客不搞高深理论，只唠实在干货~
09-11 1345
本文整理了8种实现div水平垂直居中的方法，涵盖传统与现代解决方案。基础方法包括文本专用的text-align+line-height和需要固定宽高的margin auto+绝对定位；经典方法如绝对定位+负margin；现代方法推荐支持动态宽高的绝对定位+transform、Flex布局和Grid布局。Flex布局通过justify-content和align-items实现居中，代码简洁兼容性好；Grid布局则使用place-items一行代码完成。不同方法各有优缺点，开发者可根据项目需求（如兼容性、动态
css 怎么让一个小div在另一个大div里面 垂直居中
jiopp的博客
09-06 915
<div class = "parent"> <div class = "child"></div> </div> .parent { width:500px; height:500px; border:3px solid #000; display:flex; justify-content:center; align-items:...
让div垂直水平居中的方法
夏天的博客
07-01 1392
关于如何让div垂直居中这个问题，是初级前端面试被问到的较为基础以及很常见的一道题目，下面我将总结一下让div垂直居中的击中方法。 1.图片展示 2. 首先它分为以下两种情况： <body> <div class="wrap"> <div class="box">123</div> </div> </body> 知道宽高的情况下 1.margin：0 auto; (效果为水平居中) { width: 1
如何让一个div垂直水平居中
抚琴之泪的博客
09-29 643
如何让一个div垂直水平居中
精选资源
div框水平垂直居中跟内容垂直居中.html
03-31
div框水平垂直居中跟内容垂直居中
精选资源
Flex布局实现div内部子元素垂直居中的示例
01-21
任何一个容器都可以指定为Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。  采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为...
精选资源
div垂直居中-CSS元素垂直居中方法的探究
06-11
课程提供的两个PDF文件"div垂直居中-CSS元素垂直居中方法的探究-20181030181528302_98662.pdf"和"div垂直居中-CSS元素垂直居中方法的探究-2018103018153623_11191.pdf"很可能是详细的教程资料，包含了具体的代码示例...
div垂直居中的方法
studyqingfeng的博客
03-11 1490
在我们排版的过程当中,有许多样式要求我们把div设置成为垂直居中但有些小伙伴不知道怎么做,下面就跟着博主来实现如何让div垂直居中,可用一下几种方法注: 1.1 dispaly:table-cell,这是对类似文字元素起作用的,所以包含在span标签内1.2 对于文字居中h1,span,p等类似文字标签都可以这样设置居中注: 以上方法同样适用于img, 只需将child换成img就行,不在需要上面方法中的span标签注: 3.1 display:flex,将对象作为弹性伸缩盒显示。
如何让小的div在大的div中垂直居中
u013418556的博客
12-11 617
如何让小的div在大的div中垂直居中&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;居中&lt;/title&gt; &lt;style&gt; #first{
让一个div垂直水平居中
qq_43765727的博客
09-25 313
1: 使用绝对定位 div { width: 100px; height: 100px; position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; } 2:div绝对定位，margin负间距水平垂直居中 div{ width: 100px; height: 100px; position:...
div中的内容垂直居中的五种方法
cetinlo的博客
05-28 3188
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距（padding）法 另一种方法和
如何让一个div盒子水平垂直居中（实现代码如下：）
weixin_43748930的博客
03-27 2050
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
css 如何让一个div垂直水平居中（非弹性盒子）
mossbaoo的博客
02-25 600
该文章方法是在非弹性flex盒子的情况下使用。 使用场景多为页面弹窗，需要垂直水平居中。 · 在未知div的宽度情况下，建议使用方法一和方法二 方法一 div{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);} 方法二 div{position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto;} · 在已知div的宽度情况下
如何将一个div水平垂直居中
yangwei2048的博客
11-22 394
方法一：     div绝对定位水平垂直居中【margin: auto实现绝对定位元素的居中】，兼容性：IE7及之前版本不支持 div{     width: 200px;     height: 200px;     background: green;     position:absolute;     left:0;     top: 0;   ...
如何使div垂直居中，以及水平居中
lianflower的博客
03-12 153
详见 https://stackoverflow.com/questions/2743989/how-to-vertically-center-divs <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title...
如何让div内多行文字垂直居中？
最新发布
09-19
在HTML中让div内多行文字垂直居中，有以下几种方法： ### 使用`display: table`和`display: table-cell` 将父元素设置为块级表格来显示（`display: table`），子元素设置为表格单元格来显示（`display: table-cell`），再设置`vertical-align: middle`。示例代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>多行文字垂直居中</title> <style> .parent { display: table; width: 400px; height: 400px; background-color: aqua; overflow: hidden; } .child { display: table-cell; vertical-align: middle; text-align: center; background-color: antiquewhite; } </style> </head> <body> <div class="parent"> <div class="child"> 你好你好你好你好你好你好你好你好你好你好你好 </div> </div> </body> </html> ``` 这种方法可以实现多行文字垂直居中，不过要注意，该方法在一些低版本浏览器中可能存在兼容性问题，比如不能兼容IE7、IE6 [^1][^4]。 ### 使用Flexbox布局 通过`display: flex`将父元素设置为弹性容器，再使用`align-items: center`实现垂直居中。示例代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>多行文字垂直居中</title> <style> .parent { display: flex; flex-direction: row; align-items: center; width: 400px; height: 400px; background-color: aqua; } </style> </head> <body> <div class="parent"> <p>你好你好你好你好你好你好你好你好你好你好你好</p> </div> </body> </html> ``` Flexbox布局是一种现代的布局方式，使用起来比较方便，但在一些旧版本浏览器中可能不被支持 [^2]。 ### 设置`line-height` 当父元素高度固定时，设置`line-height`等于父元素高度，也能实现多行文字垂直居中。示例代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>多行文字垂直居中</title> <style> .parent { height: 400px; line-height: 400px; width: 400px; background-color: aqua; } </style> </head> <body> <div class="parent"> <p>你好你好你好你好你好你好你好你好你好你好你好</p> </div> </body> </html> ``` 这种方法适用于单行或多行文字，但如果文字内容较多，可能会影响显示效果 [^3]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值