前端杂文之盒子始终属于上下左右居中位置

最新推荐文章于 2023-10-11 15:04:07 发布

weixin_41876822

最新推荐文章于 2023-10-11 15:04:07 发布

阅读量279

点赞数

分类专栏：前端杂谈文章标签：定位 flex

本文链接：https://blog.csdn.net/weixin_41876822/article/details/111632474

版权

前端杂谈专栏收录该内容

3 篇文章 0 订阅

订阅专栏

回顾flex布局
參看 https://www.cnblogs.com/hellocd/p/10443237.html

<div style="border: 1px red solid;display: flex;justify-content: space-around;">
			<div style="background: red;width: 200px;height: 200px;">
				<div style="background: blueviolet;width: 100px;height: 100px;"></div>
			</div>
			**回顾相对定位和绝对定位 相对定位和绝对定位**
			<div style="background: red;width: 200px;height: 200px; position: absolute;">
				<div style="background: blueviolet;width: 100px;height: 100px; position: relative;
					top: 50px;left: 50px;"></div>
			</div>
			
			<div style="background: red;width: 200px;height: 200px;">
				<div style="background: blueviolet;width: 100px;height: 100px;"></div>
			</div>
			
			<div style="background: red;width: 200px;height: 200px;">
				<div style="background: blueviolet;width: 100px;height: 100px;"></div>
			</div>					
		</div>

技巧一：盒子始终属于上下左右居中位置
在这里插入图片描述
如上图所示我们想要一个盒子上下左右居中在屏幕中间，并且盒子高度和宽度是不固定的，我们可以这么做

<body class="parent">
		<form class="child">
		4444444444444444444444444444444444444444444
		444444444444444444444444444444444444444444444444444444
		444444444444444444444444444444444444444444444444444444		
		</form>
</body>
	<style>
		.parent{
			background: gainsboro;
		}
	.child{
			border: 1px red solid ;
			width: 500px;
			position: absolute;
			word-wrap: break-word; //超出宽度自动换行
		    top: 50%;
		    left: 50%;
		    //向X轴平移，填正数往右平移，填负数，往左平移
		    transform: translate(-50%, -50%);
	}
	</style>

weixin_41876822

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端杂文之盒子始终属于上下左右居中位置

回顾flex布局參看 https://www.cnblogs.com/hellocd/p/10443237.html<div style="border: 1px red solid;display: flex;justify-content: space-around;"> <div style="background: red;width: 200px;height: 200px;"> <div style="background: blueviolet;
复制链接

扫一扫

专栏目录