在父子盒子嵌套下,让子盒子居中的方式:
第一种方法:position, 使用定位,子绝父相,再left:50%,margin-left:负的盒子宽度的一半,这是最常用的方法
第二种方法:flex,弹性布局,让子盒子居中,但是样式要写在父盒子中,display:flex,just-content:center
第三种方法:在position基础上,把margin-left换成CSS3中的transform:translate(-50px)
第四种方法:在position的基础上,只保留子绝父相,然后在子盒子中加上margin:auto、left:0、right:0;
链接:https://zhuanlan.zhihu.com/p/39437057
第一种:利用负的margin来进行居中,需要知道固定宽高,限制比较大。
body>div:nth-of-type(1){ width:400pxheight:400pxbackground:#ff0position:relativemargin-bottom:10px}
body>div:nth-of-type(1)div{ width:100pxheight:100pxbackground:#0f0position:absolutetop:50%left:50%margin-left:-50pxmargin-top:-50px}
第二种:利用绝对定位居中,非常常用的一种方法。body>div:nth-of-type(2){ width:400pxheight:400pxbackground:#ff0position:relativemargin-bottom:10px}
body>div:nth-of-type(2) div{ width:100pxheight:100pxbackground:#0f0position:absolutetop:0left:0right:0bottom:0margin:auto}
第三种:使用flex布局(.min宽高可不固定)
body>div:nth-of-type(3){ width:400pxheight:400pxbackground:#ff0margin-bottom:10pxdisplay:flex}
body>div:nth-of-type(3) div{ width:100pxheight:100pxbackground:#0f0margin:auto }
第四种:flex居中(演示)。CSS3中引入的新布局方式,比较好用。缺点:IE9以及IE9一下不兼容。
body>div:nth-of-type(4){ width:400pxheight:400pxbackground:#ff0margin-bottom:10pxdisplay:flexjustify-content:centeralign-items:center}
body>div:nth-of-type(4) div{ width:100pxheight:100pxbackground:#0f0}
第五种:利用table-cell来控制垂直居中。
body>div:nth-of-type(5){ width:400pxheight:400pxbackground:#ff0margin-bottom:10pxvertical-align:middledisplay:table-celltext-align:center}
body>div:nth-of-type(5) div{ width:100pxheight:100pxbackground:#0f0display:inline-block }
第六种:利用空盒子做外容器,里边的块元素会自动垂直居中,只需要控制一下水平居中就可以达到效果。
body>div:nth-of-type(6){ width:400pxheight:400pxbackground:#ff0margin-bottom:10pxtext-align:center vertical-align:middle}
body>div:nth-of-type(6) div{ width:100pxheight:100pxbackground:#0f0display:inline-blockvertical-align:middle}
body>div:nth-of-type(6) span{ width:0height:100%display:inline-blockvertical-align:middle}
第七种:这种方法灵活运用CSS中transform属性,较为新奇。缺点是IE9下不兼容。
body>div:nth-of-type(7){ width:400pxheight:400pxbackground:#ff0position:relativemargin-bottom:10px}
body>div:nth-of-type(7) div{ width:100pxheight:100pxbackground:#0f0position:absolutetop:50%left:50%transform:translate(-50%,-50%)}
举个例子<div style="width: 200pxheight: 200pxbackground: bluemargin: 0 auto"></div>
这一行直接放到body里边,他肯定是居中的。
flex居中:
<div style="display: flexjustify-content:center">
<div style="width: 200pxheight="200pxbackground: red"></div>
</div>
这个也能实现居中,当然也可以垂直居中,垂直的话display: flex后面加上flex-direction: column就可以了。
这里的分号是分隔符,最后一个样式可以不加,但只要后面有其他样式就必须要加分号,不然样式会失效。