控制垂直居中

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

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

方法一

  1. 通过弹性布局来实现居中
    通过对父盒子设置display:flex;
            #main{
            display: flex;
            justify-content: center;
            align-items: center;
            }

方法二:

  1. 需要指定 定位信息 子元素为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;
            }
  1. 控制垂直居中的方式
    通过计算的方式
    左上角为(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%);
            }

https://www.jianshu.com/p/ed16af2a411d 居中链接 参考

在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值