Web_CSS_DIV内部垂直居中显示

最新推荐文章于 2023-05-25 14:38:05 发布
最新推荐文章于 2023-05-25 14:38:05 发布
阅读量789 收藏
点赞数
分类专栏： Web 文章标签： Web CSS DIV
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cyb_23/article/details/10243235
版权

功能：在div中垂直方向居中；

效果：

源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>居中显示解决方案</title>
<style type="text/css">
#outer{
	height: 100px;
	overflow: hidden;
	position: relative;
}
#outer[id] {
	display: table;
	position: static;
}

#middle { /*for explorer only*/
	position: absolute;
	top: 50%;
}
#middle[id] {
	display: table-cell;
	vertical-align: middle;
	position: static;
}

#inner { /*for explorer only*/
	position: relative; 
	top: -50%;
}

/* optional
#inner[id] {
	position: static;
}
*/
.withBorder {
	border: 1px green solid;
}
</style>
</head>
<body>
	<div id="outer" class="withBorder">
		<div id="middle">
			<div id="inner">
				我们追求的是垂直方向的居中！我们追求的是垂直方向的居中！我们追求的是垂直方向的居中！我们追求的是垂直方向的居中！
			</div>
		</div>
	</div>
</body>
</html>


 

cyb_23
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 图片在DIV中垂直居中的显示方法
donglindonglin的博客
12-15 2336
vertical-align:middle;的作用 这篇文章重点写下vertical-align:middle;的作用 1、使用margin属性进行水平对齐 .center { margin:auto; width:70%; background-color:#b0e0e6; } 这是一个段落。这是一个段落。这是一个段落。这是一个段落。这是一个段落。 这是一个段落。这是一
文本在DIV中垂直居中显示
Lachesis_的博客
01-15 245
1 图片 为了看清楚结构，加了黑色边框 2 代码 *{ background-attachment: fixed; } img{ float: left; width:30px; height: 30px; overflow: hidden; padding:10px; border:1px solid #000; } .all-wraper{ display: inline-block; background-color: #fff
CSS实现垂直居中的5种方法
m0_56649557的博客
08-20 1万+
第一种 position定位+margin负距离 前提是知道居中元素的宽高，首先给居中元素定位，之后设置margin的负距离为具体宽高的一半便可达到垂直居中效果 <style> .box1 { height: 300px; width: 300px; border: 10px solid pink; position: relative; } .
盒子居中 方法
xtyxtyxtywq的博客
09-23 618
盒子居中 方法
5种div 内容水平垂直居中方法
最新发布
等花开一起压花路
05-25 1万+
以上五种方法都能实现 div 中内容的水平垂直居中，具体使用哪种方法可以根据具体的项目需求和适用场景来决定。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。容器中的内容水平、垂直居中。
div中的内容垂直居中的五种方法
cetinlo的博客
05-28 2527
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距（padding）法 另一种方法和
CSS总结div中的内容垂直居中的五种方法
qq_41425267的博客
11-03 2万+
一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达到让文字在段落中垂直居中的效果。 二、内边距（padding）法 另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如： p { padding:20px 0; }
CSS网页布局：div垂直居中的各种方法
09-27
CSS网页布局中，div元素的垂直居中是一个常见的需求，尤其在设计响应式网页时更为重要。虽然CSS的`vertical-align`属性适用于某些特定元素，如表格单元格，但对于div等块级元素，该属性并不起作用。因此，我们需要...
div垂直居中-CSS元素垂直居中方法的探究
06-11
课程提供的两个PDF文件"div垂直居中-CSS元素垂直居中方法的探究-20181030181528302_98662.pdf"和"div垂直居中-CSS元素垂直居中方法的探究-2018103018153623_11191.pdf"很可能是详细的教程资料，包含了具体的代码示例...
CSS解决未知高度的DIV垂直居中
11-03
### CSS解决未知高度的DIV垂直居中 #### 知识点概述 在Web开发中，实现元素的垂直居中是一项常见的需求。对于已知高度的元素来说，这相对容易实现。但对于那些高度未知或者动态变化的元素，尤其是嵌套在另一个未知...
css图片垂直居中 css中如何实现图片垂直居中
09-25
在Web前端开发中，实现图片在容器中垂直居中是常见的布局需求，尤其是在图片尺寸未知或动态变化时。本知识点将详细讲解如何使用纯CSS技术来实现一个图片在其父容器中水平和垂直居中，特别是在给定的尺寸约束条件下。...
css 水平居中，垂直居中，自适应宽度的代码
09-25
### CSS水平居中与垂直居中及自适应宽度详解 #### 一、宽度自适应的元素水平居中 在Web开发中，使元素能够根据内容的多少自动调整宽度，并将其水平居中的需求非常常见。本篇文章将详细介绍如何通过CSS实现这一效果...
如何将div中的内容垂直居中
qq_40603010的博客
09-23 5611
如何将div中的内容垂直居中 第一种方法: 在div里面添加：text-align:center; line-height: 60px; 这里的line-height是行高，这个根据你的div的高度要调一下。 第二种方法: 就是改变div的属性，让其display属性为table-cell，我们知道table单元格中可以通过vertical-align垂直居中，转化后也可以用此属性， 在div里面添加：display:table-cell; vertical-align: middle; 综上所述，将div
CSS教程：div垂直居中的N种方法
weixin_30882895的博客
08-23 829
在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊！所以在这里我还要啰嗦两句，CSS中的确是有vertical-align属性，但是它只对(X)HTML元素中拥有valign特性的元素才生 效，例如表格元素中的<td>、<th>、<capt...
如何设置子div在父div中垂直居中显示？（已知或未知父div宽高的7种方法）
qq_36429258的博客
08-03 3194
如何设置子div在父div中垂直居中显示？（已知或未知父div宽高）
实现div中的div水平垂直居中
D_Z_Yong的博客
08-19 3万+
方法一 利用transform实现div居中,要先设置定位 css .outer { width: 500px; height: 200px; background-color: green; position: relative; } .inner { width: 20px; height: 10px; background-colo...
div水平垂直居中的四种方式
热门推荐
qq_57443373的博客
09-08 3万+
让div水平居中的方式，我所知道的就是以下这四种。 文章目录一、margin二、绝对定位三、子元素绝对定位父元素相对定位四、flex布局总结 一、margin 第一种方式我们可以利用外边距属性来使div水平垂直居中 先来看一段有问题的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d..
CSS——div垂直居中及div内文字垂直居中
aiyizou6070的博客
03-19 812
　　最近做demo时，经常需要div垂直居中或者让div内文字相对div垂直居中。水平居中比较简单，就不多说了，这里主要记录一下垂直居中的一些方法。 一、div垂直居中的一些方法： 1.当height、width固定大小时， <!DOCTYPE html> <html> <head> <meta chars...
Web_PHP_DedeCMS_网络预约；
cyb专栏
04-10 1675
Web_PHP_DedeCMS_网络预约功能预览： 1、 头部预约； 图1、第一次访问 图2、再次访问 图3、展开预约 图4、使用预约 2、 QQ咨询代码自动运行； 图1、自动运行qq咨询 =>index.html 头部自助挂号 咨询qq客服 =
web前端字体居中_css如何让文字水平居中显示？
05-25
可以使用CSS的text-align属性来实现文字水平居中显示。例如，如果你想让一个div中的文字水平居中，可以在该元素的样式中添加以下代码： ```css div { text-align: center; } ``` 这样，div中的文字就会自动水平居中显示。如果你只想让某个段落中的文字水平居中，可以使用类似下面的代码： ```css p { text-align: center; } ``` 另外，如果你想让文字在垂直方向上居中显示，可以使用CSS的line-height属性。例如，如果你想让一个div中的文字在垂直方向上居中，可以在该元素的样式中添加以下代码： ```css div { line-height: 100px; /* 假设该div的高度为100px */ } ``` 这样，div中的文字就会在垂直方向上居中显示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值