html给盒子垂直居中,H5 让小盒子在大盒子内水平垂直居中的9种方法总结

盒子垂直居中,H5 让小盒子在大盒子内水平垂直居中的9种方法总结"/>

html给盒子垂直居中,H5 让小盒子在大盒子内水平垂直居中的9种方法总结

@H5 让小盒子在大盒子内水平垂直居中的9种方法总结

以下所有方法中的盒子的css样式都为如下代码

body>div{ width:400px; height:400px; background:#0f0; margin-bottom:20px;}

div div{ width:100px; height:100px; background:#ff0; font-size:50px; line-height:100px; text-align:center;}

1

效果如图

1.利用定位(三种方法)

body>div:nth-child(1){ position:relative}

body>div:nth-child(1) div{ position:absolute; top:0; left:0; right:0; bottom:0; margin:auto}

body>div:nth-child(2){ position:relative}

body>div:nth-child(2) div{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)}

body>div:nth-child(3){ position:relative}

body>div:nth-child(3) div{ position:absolute; top:50%; left:50%; margin-top:-50px; margin-left:-50px;}

2.