定位(三种)
- 定位1
- 外层body的定位方式设置成相对定位
position:relative;
- 内层盒子的定位方式设置成绝对定位
position:absolute;
- 内层盒子的
top
和left
都设置为50%
- 如果知道内层盒子的具体宽高,再设置其
margin-top
和margin-left
(属性值为负的内层盒子宽高的一半)
body{
position:relative;
}
.box{
position:absolute;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-50px;
}
- 定位2
- 补充:如果不想去考虑内层盒子的宽高大小,可以将内层盒子的
top
、left
、right
、bottom
都设置为0,然后加上margin:auto;
也能实现居中效果。(注意此方法只是没有涉及到具体的宽高值,但是要求内层盒子本身是具有宽高值的)
body{
position:relative;
}
.box{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
- 定位3
- 重要:利用
transform
来调整元素的移动(它的兼容性没有特别好)
body{
position:relative;
}
.box{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,50%);
}
display:flex(尤其在移动端开发中特别方便)
- 将父容器的
display
设置为flex
- 然后设置
justify-content
和align-items
(在这里主轴是默认是x轴,即水平方向,通过justify-content设置;align-items在此场景下用来设置垂直方向上的居中。)
body{
display:flex;
justify-content:center;
align-items:center;
}
Javascript
(HTML的宽高-盒子的宽高)/2+‘px’(简单描述一下,不写了)
display:table-cell(本身是用来控制文本的居中,不常用)
- 此方法要求父级元素有固定宽高
body{
display:table-cell;
vertical-align:middle;
text-align:center;
/*固定宽高*/
width:500px;
height:500px;
background:lightblue;
}
.box{
/*需要把盒子设置为行级元素*/
display:inline-block;
}