盒子内容垂直居中

最新推荐文章于 2024-02-10 16:29:38 发布
最新推荐文章于 2024-02-10 16:29:38 发布
阅读量2.7k 收藏 10
点赞数 3
分类专栏： DOM节点的 增 ·删· 改· 查 文章标签： 盒子模型垂直居中
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38743783/article/details/83931216
版权

盒子内容垂直居中有两种：
1.给父级加上相对定位position:relative; 给子元素添加绝对定位position:absolute;
设置top,right,bottom,left的值都是0；调整margin内边距为自适应auto;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.main{
				width: 800px;
				height: 700px;
				background-color: #999999;
				position: relative;
			}
			.main .main1{
				width: 300px;
				height: 300px;
				background-color: red;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class='main'>
			<div class='main1'></div>
		</div>
	</body>
</html>

在这里插入图片描述
第二种方法：
1.将父级变成单元格，display:table-cell; 设置内部元素垂直对齐vertical-align:middle;
text-align:center; 居中
2.子元素配合父元素，变成行内块级元素display:inline-block;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.main{
				width: 500px;
				height: 400px;
				background-color: #999999;
				display: table-cell;/*变成表格单元格*/
				vertical-align: middle;
				text-align: center;
			}
			.main .main1{
				width: 100px;
				height: 100px;
				background-color: red;
				display: inline-block;
			}
		</style>
	</head>
	<body>
		<div class='main'>
			<div class='main1'></div>
		</div>
	</body>
</html>

在这里插入图片描述
第三种与第一种相似
1.给父级加上相对定位position:relative; 给子元素添加绝对定位position:absolute;
设置top,left,margin-top:-自身高度的一半；margin-left:-自身宽度的一半；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.main{
				width: 500px;
				height: 400px;
				background-color: #999999;
				position: relative;
			}
			.main .main1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
				top: 50%;
				margin-top: -150px;
				left: 50%;
				margin-left: -150px;
		}
		</style>
	</head>
	<body>
		<div class='main'>
			<div class='main1'></div>
		</div>
	</body>
</html>

在这里插入图片描述
第四种 需要用到弹性盒子。简单方便
1.给弹性容器(父容器)添加display:flex;
2.给弹性容器的子元素加上 margin:auto;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			.main{
				width: 500px;
				height: 400px;
				background-color: #999999;
				display: flex;
			}
			.main .main1{
				width: 100px;
				height: 100px;
				background-color: red;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div class='main'>
			<div class='main1'></div>
		</div>
	</body>
</html>

在这里插入图片描述
效果一样 简单便捷。

年年CODE
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2021-05-12 设置文本和子盒子垂直居中的方法汇总
GAARA
05-12 265
1.文本垂直居中 1.1.单行文本垂直居中 行高=盒子高度 div { width: 300px; height: 150px; border: solid; /*设置水平居中*/ text-align: center; /*设置行高等于高度,可以让div中的单行文本垂直居中*/ line-height: 150px;
CSS之盒子居中的方法
a804847944的博客
07-30 1061
一、盒子垂直居中的方法 　　1、先让盒子的上下边缘和父盒子的水平中心线重叠，，然后再让子盒子往回移动自身一半的距离 1 <div class="father"> // 结构 2 <div class="son"></div> 3 </div> 4 /* 通...
盒子居中 方法
xtyxtyxtywq的博客
09-23 606
盒子居中 方法
一行文字的时候，文字在整个盒子中垂直水平居中，超过一行之后，文字在盒子中垂直水平居中，文字左对齐...
ask04800的博客
04-11 556
在现实工作中，很多时候会有一些比较奇怪的需求，但即使是奇怪，但还是需要去实现。最近，在工作中，遇到一个需求，是这样的： 　　1、标题只有一行文字的时候，整个标题在一个div中需要垂直水平居中，文字也是居中对齐 2、当标题超过一行的时候，那么标题在这个div中需要垂直水平居中，但是文字变成了左对齐 根据如上描述，其实所用到的知识点也就那么几个: 1、未...
使用CSS实现盒子水平垂直居中的方法(8种)
01-18
原始代码： center.html： <!DOCTYPE html> <html lang=Zh> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0>...
CSS 实现盒子水平居中、垂直居中和水平垂直居中….docx
11-24
` 可以实现盒子垂直居中，但这只适用于子盒子有宽度和高度的情况。 2. 方法二：使用 `position` 和 `transform`（子盒子有或没有宽高的时候都适用） 使用 `position: absolute;` 和 `transform: translateY(-50%);...
让子盒子在父盒子中垂直居中的五个方法
01-08
一、用padding实现 1.padding-top = (父盒子的高度 – 子盒子的高度) / 2 ... /* 大盒子300*300，小盒子150*100，怎么使小盒子在大盒子里面居中 */ .dad { /* 300-75=225 */ width: 225px; /* 300-100=200 */
css常用元素水平垂直居中方案
01-19
flex实现水平垂直居中 适用场景：父子宽高都可未知(比较推荐这种方式，简单，而且目前兼容性也不错。) <html> <head> <style> .parent { width: 100%; height: 100px; background: cyan; ...
固定宽度 高度的页面在不同分辨率的屏幕上垂直 水平居中
09-25
怎样实现固定宽度、高度的页面在不同分辨率的屏幕上垂直、水平居中，要求兼容IE,需要的朋友可以了解下
文本和盒子的水平 垂直居中 (18种方法)
热门推荐
qq_52301431的博客
04-08 1万+
图片与盒子的基线： <div class="img"> <img src="" alt=""> </div> 给img设置了高度，div没有设置，就会出现div会大一些。 所以解决方法：给div加和img一样的宽度，或者hight：100% 图片和文字基线对齐： ............
文本在盒子中水平垂直居中
我要手撕源码的博客
12-29 585
水平居中 text-align: center; 垂直居中 vertical-align 无法满足所有情况 vertical-align只对拥有valign特性的元素才生效 <td>、<th>、<caption>等 <div>、<span>没有valign特性，因此需要 vertical-align: middle 几种常用垂直居中方法 单行文本居中 <div class="div1">单行文本居中</div>
HTML+CSS 五种居中方式
Keep_Doing的博客
03-02 332
<div class="par"> <div class="son"></div> </div> /* 方法一：利用定位 */ .par { width: 500px; height: 500px; background-color: rgb(241, 112, 60); position: relative; } .son { width: 10
关于盒子垂直居中的一些小技巧
zhangren888的博客
11-22 375
关于盒子垂直居中的一些小技巧最近想整理一些关于CSS的知识，把自己学到的分类清理。 本文整理自己了解到的———盒子垂直居中的一些小技巧。1.给 .outbox 添加一个[ padding：80px 0px; ]（padding-top, padding-bottom）值， .innerbox 处于垂直居中，再添加一个[ padding：80px 50px; ]（padding-left, padd
html+css使得盒子水平垂直居中（常用的三种方法）
IT_Dilraba_bin的博客
02-27 1818
常常我们会遇到让盒子在页面中水平垂直居中，例如在登录页面的时候，我们会让登录的盒子水平垂直居中在页面的中心。这个时候我们会有很多种方法去使得盒子居中。下面是我常用的三种方法：
盒子水平垂直居中的几种方式
AHua~
06-09 178
1、元素垂直居中介绍 在项目开发过程中，我们经常要实现将一个盒子水平垂直居中的效果 2、元素垂直居中的几种方式 1、使用Flex属性主轴交叉轴都居中 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ m
CSS-盒子垂直居中-持续更新
东东爱编码博客
05-13 518
文章目录一、CSS-盒子垂直居中几种姿势1. 使用table-cell + vertical-align2. 使用inline-block + line-height3. 使用伪元素，inline-block元素特性4. 使用flex5. 使用grid6. 使用定位居中【absolute + transform】7. 使用定位居中【absolute + calc】8. 使用定位居中【absolute + 负margin】9. 使用定位居中【absolute + margin:auto】 一、CSS-盒子垂直
css中使文字在盒子中垂直居中的两种方式
最新发布
2301_79706485的博客
02-10 791
利用行高上下两侧距离相等的原理实现文本垂直居中。具体代码为使line-height与盒子的height像素相等就可以实现，但需要注意的是，因为displa=inline-block的影响，可能经常会出现把行高写成inline-height，从而导致处置居中实现不了，所以如果显是的效果不同，建议先检查一下哈高的代码写没写错，反正我是经常写错，接下来是实现的原理，如果不想了解的，可以直接跳过去看的第二种方式。
如何将盒子里的文字水平居中和垂直居中
yanhn123的博客
05-09 1万+
1. 将文字水平居中,只需要在盒子里添加 text-align: center就可以了. <style> div{ text-align: center; } </style> <body> <div>将文字水平居中</div> </body> 2. 将盒子垂直居中,只需要将文字行高等于盒子的高度就行. <style> div
css盒子内容垂直居中
07-07
要将CSS盒子内容垂直居中，你可以使用以下方法之一： 1. 使用flexbox布局： ```css .container { display: flex; align-items: center; justify-content: center; } ``` 2. 使用绝对定位和transform属性： ```css .container { position: relative; } .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 3. 使用table布局： ```css .container { display: table; } .content { display: table-cell; vertical-align: middle; text-align: center; /* 如果需要水平居中 */ } ``` 这些方法可以在不同的情况下使用，选择适合你的布局和需求的方法即可。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值