控制垂直居中

最新推荐文章于 2021-08-03 19:04:47 发布

养乐多掺水不加冰

最新推荐文章于 2021-08-03 19:04:47 发布

阅读量175

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/qq_41654485/article/details/103974434

版权

前端开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<body>
	<div id="main>父盒子
		<div id="box">子盒子</div>
	</div>
</dbody>

子盒子要在父盒子实现居中

方法一

通过弹性布局来实现居中
通过对父盒子设置display：flex；

            #main{
            display: flex;
            justify-content: center;
            align-items: center;
            }

方法二：

需要指定定位信息子元素为abs 父元素为relative 指定元素的高度使用margin控制居中

设置子元素定位为 absolute 设置父元素为relative 一定要记住

为什要设置父元素的position的值为relation呢？

当子元素设置absolute时，已经脱离文档流，它的宽高不再由父元素决定，而是相对body而言。
当设置父元素为relation时，子元素的宽高又由父元素相对而言，即父元素为参照物。
设置 top left bottom right 是为了与父元素大小一样,使用margin 控制居中

            
       #main{
       		position: relative;
       		}     
       #box{
       		position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin:auto;
            }

控制垂直居中的方式
通过计算的方式
左上角为（0,0）记向右向下为x y 轴的正方向
设置子元素定位为 absolute 设置父元素为relative 一定要记住

top:50 指定是父元素的宽高
translate(-50%) 指的是自身宽高的50% translate(x,y)

	#main{
		position:relative;
		}
		#box{
			position:abolute;
			top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            }