<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%);
}
https://www.jianshu.com/p/ed16af2a411d 居中链接 参考