三行代码实现div内元素垂直居中

最新推荐文章于 2022-09-24 17:07:53 发布
最新推荐文章于 2022-09-24 17:07:53 发布
阅读量433 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qulongjun/article/details/47665629
版权

在前端编写中，经常会遇到div内部元素需要居中效果，主要实现方式为：

1.水平居中：margin: 0 auto;

2.垂直居中，

position: relative;
top: 50%;
transform: translateY(-50%);

Demo如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.div1 {
				border: 1px solid red;
				height: 200px;
				width: 200px;
			}
			.div2 {
				border: 1px solid green;
				height: 100px;
				width: 100px;
				margin: 0 auto;
				position: relative;
				top: 50%;
				transform: translateY(-50%);
			}
		</style>
	</head>

	<body>
		<div class="div1">
			<div class="div2">

			</div>
		</div>
	</body>
</html>

（1）未设置Position:relative之前， 内部的元素贴在外部元素的顶端。

（2）设置了相对定位，并位移父容器的50%的高度。即向下平移50%。


（3）设置向上位移50%自身高度，完成居中效果。

水果控丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
解决div中元素垂直居中的五种方法
NananananA' township
07-12 6195
假设div的高度为200px，字体大小为20px 方法一：利用padding内边距 我要垂直居中 .type1{ border: 1px solid blue; font-size: 20px; padding: 90px 0; line-height: 1; } 注意此时不用设置div的高度height：200p
CSS+DIV布局(满屏自适应三行布局,兼容FF,div垂直居中)
07-13
带DOCTYPE的写法。。 ------------------ CSS+DIV写的，上下固定高度，中间自动适应高度满屏布局的页面~~写了好久的。ie6还有点问题。。。 兼容IE7,IE8,FF,Opera,Safari,谷歌浏览器 ------------------------- 附送一个 DIV垂直居中的页面~~~
三行代码实现垂直居中和cube
weixin_30321709的博客
04-15 123
三行代码实现上下居中 position: relative;top: 50%;transform: translateY(-50%); 效果如下： 代码： <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>css123&...
3行Css实现div水平、垂直居中
Dragon.G
06-06 979
HTML部分：<div class="container"> <!-- This is your content ... --> </div>Css部分：就像下面，只需要给.container三行css规则就可以使它在水平方向和垂直方向均处于居中。.container { display: flex; justify-content: center; al
web中的各种居中
热门推荐
要和代码过一辈子的博客
04-20 1万+
居中是前端开发过程中最常见的布局，但是很多人都不清不楚，每次就靠试一试，今天就拎一拎～～ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学习居中</title> <style> .father { height: 200px; wid...
table让元素垂直居中的布局小技巧
web_hua的博客
10-09 8125
通过给父元素设置display：table,然后给子元素设置display:table-cell,vertical-align:middle可以实现子元素的内容水平垂直居中，下面代码实例： html> lang="en"> charset="UTF-8"> Title type="text/css" rel="stylesheet"> .table
div在html垂直居中,div 垂直居中(css div水平垂直居中六种方法)
weixin_29119475的博客
06-10 3847
div垂直居中div垂直居中代码示例如下：前台效果如下图所示：如图所示，div中的文字垂直居中。其中主要的属性就是line-height。line-height属性设置行间的间隔(行高即垂直方向)。line-height属性会影响行框的规划。在应用到一个块级元素时，它定义了该元素中基线之间的最小间隔而不是最大间隔。line-height与font-size的计算值之差(在CSS中成为“行间距”)分...
css中如何使div元素居中垂直水平居中
m0_68968891的博客
09-24 4331
css中如何使div元素居中垂直水平居中
学习使用CSS实现div中的内容垂直居中的方法
徊忆羽菲
03-08 1080
学习使用CSS实现div中的内容垂直居中的方法一、行高（line-height）法二、内边距（padding）法三、模拟表格法四、CSS3的transform来实现五：css3的box方法实现水平垂直居中六：flex布局 一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如： p { height:30px; line-height:30px; width:100px; overflow:hidden; } 这段代码可以达
CSS设置DIV垂直居中的N种方法 兼容IE浏览器
09-27
以上就是实现CSS兼容IE浏览器的DIV垂直居中的多种方法。每种方法都有其适用场景和局限性，开发者可以根据项目需求和目标浏览器范围选择合适的技术。对于兼容性问题，还可以使用条件注释、Modernizr库或者工具如...
div 垂直居中的多种方法详细介绍
12-13
在说到这个问题的时候，也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗？即使是某些浏览器不支持我只需做少许的...一、单行垂直居中 如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要
div中多行文字垂直居中
07-21
首先，父元素需设置`position: relative`，然后将子元素（包含文字的`div`）设置为`position: absolute`，并使用`top: 50%`和`transform: translateY(-50%)`组合来实现垂直居中。 ```css .parent { position: ...
jquery.valign插件实现图片,文字上下左右垂直居中
06-10
今天特意在网上找到了一款插件--jquery.valign，可控制图片、文字在div容器内垂直上对齐、居中、底部对齐三种效果，使用方法： 1、调用jquery库以及本插件 2、jquery方法调用，如本案例第22、23行 使用说明：  外侧...
div中内容上下居中小结
09-25
情形一：DIV 限高，内容长度限一行 在这种情形下，使用 margin: 0 auto; 设置 DIV 的水平居中，然后使用 text-align: center; 设置文本水平居中，最后使用 line-height: 80px; 设置文本垂直居中。 情形二：DIV ...
如何让一个div盒子水平垂直居中（实现代码如下：）
weixin_43748930的博客
03-27 1944
<!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-...
b050闲置图书分享-springboot+vue+elementui.zip（可运行源码+sql文件+文档）
07-23
本次开发的闲置图书分享平台实现了收货地址管理、字典管理、公告管理、留言板管理、图书管理、图书收藏管理、图书评价管理、图书订单管理、用户管理、管理员管理等功能。系统用到了关系型数据库中王者MySql作为系统的数据库，有效的对数据进行安全的存储，有效的备份，对数据可靠性方面得到了保证。并且程序也具备程序需求的所有功能，使得操作性还是安全性都大大提高，让闲置图书分享平台更能从理念走到现实，确确实实的让人们提升信息处理效率。 管理图书的数据，此页面主要实现图书的增加、修改、删除、查看的功能。公告信息管理页面提供的功能操作有：新增公告，修改公告，删除公告操作。公告类型管理页面显示所有公告类型，在此页面既可以让管理员添加新的公告信息类型，也能对已有的公告类型信息执行编辑更新，失效的公告类型信息也能让管理员快速删除。
《大学生职业生涯规划与就业指导》大一阶段课程作业
最新发布
07-24
《大学生职业生涯规划与就业指导》大一阶段课程作业
开题报告潮汕特产直销系统 已通过开题答辩的.doc
07-23
随着互联网的高速发展，人们的生活方式发生了翻天覆地的变化，在过去，人们想要购买很远地方的东西会非常麻烦，因为是通信和交通都不是十分的方便，而现在网络购物成为了人们日常生活中不可或缺的一部分。在这样的背景下，互联网与传统行业的融合已经成为了一种不可阻挡的趋势。对于中国特色的潮汕特产来说，这一趋势也带来了巨大的变革和发展机遇[1]。
div内部中 img和span元素两行垂直居中
07-16
### 回答1： 要使div内部的img和span元素两行垂直居中，可以使用以下方法： 1. 使用Flexbox布局： 可以为div容器添加display: flex;属性，然后使用align-items: center;属性使内部元素在主轴方向上垂直居中，并使用justify-content: center;属性使元素在交叉轴方向上水平居中。代码示例如下： ```css div { display: flex; align-items: center; justify-content: center; } ``` 2. 使用table布局： 可以将div容器设置为一个表格单元格，然后将img和span元素放置在表格单元格中，并使用vertical-align: middle;属性使其垂直居中。代码示例如下： ```css div { display: table-cell; vertical-align: middle; } ``` 3. 使用绝对定位： 可以将div容器设置为相对定位，然后将img和span元素设置为绝对定位，并使用top: 50%;和transform: translateY(-50%);属性使其垂直居中。代码示例如下： ```css div { position: relative; } img, span { position: absolute; top: 50%; transform: translateY(-50%); } ``` 以上是三种实现div内部img和span元素两行垂直居中的方法，可以根据具体情况选择合适的方法来使用。 ### 回答2： 要实现div内部的img和span元素两行垂直居中，可以使用flexbox布局来实现。 首先，需要设置div的display属性为flex，这将使其成为一个flex容器。然后，我们可以使用align-items属性来控制项目在交叉轴上的对齐方式。设置align-items为center，即可实现项目在交叉轴上垂直居中对齐。 接下来，我们需要将img和span元素放置在div内部。可以使用CSS选择器来将img和span选择为div的子元素。然后，需要设置这些子元素的display属性为flex，并且使用align-items和justify-content属性来使它们水平和垂直居中。设置align-items为center和justify-content为center，即可实现子元素在div内部水平和垂直居中。 最后，为了使图片和文本在两行显示，我们可以设置span元素的display属性为block。这将使span元素以块级元素的形式显示，并占据一整行。如果希望文本居中显示，可以使用text-align属性来设置文本在span元素内的对齐方式。 综上所述，要实现div内部的img和span元素两行垂直居中，可以按照以下步骤进行操作： 1. 设置div的display属性为flex，并使用align-items属性将元素垂直居中。 2. 设置img和span元素的display属性为flex，并使用align-items和justify-content属性将它们在div内部水平和垂直居中。 3. 设置span元素的display属性为block，并使用text-align属性设置文本在span元素内的居中方式。 这样就可以实现div内部的img和span元素两行垂直居中的效果了。实际实现时可以根据具体需求进行微调。 ### 回答3： 要实现div内部img和span元素两行垂直居中，可以使用以下方法： 首先，将div元素的display属性设置为flex，这样可以使用flex布局来实现垂直居中。 然后，给div元素设置align-items属性为center，这样可以将内部元素在交叉轴方向（垂直方向）上居中对齐。 接着，将div内部的img和span元素分别放置在两个子元素内，并设置这两个子元素的display属性为flex。 对于img元素所在的子元素，我们可以设置justify-content属性为center，这样可以使其在主轴方向（水平方向）上居中对齐。 对于span元素所在的子元素，我们同样设置justify-content属性为center，使其在主轴方向上居中对齐。 最后，需要将img和span元素的高度设置为100%或者设置上下padding属性，以便填充整个父容器的高度。 通过以上布局设置，div内部的img和span元素将会在垂直方向上居中对齐。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值