Version:1.0StartHTML:000000224EndHTML:000170065StartFragment:000099677EndFragment:000169992StartSelection:000099681EndSelection:000169980SourceURL:https://blog.csdn.net/sinat_17775997/article/details/77547481
.第一种
利用margin，div1的宽减去div2的宽就是div2margin-left的数值：（100-40）/2=30
div1的高减去div2的高就是div2margin-top的数值：（100-40）/2=30
按 Ctrl+C 复制代码
<!DOCTYPE html>
demo
.div1{width:100px;height:100px;border:1pxsolid#000000;}
.div2{width:40px;height:40px;background-color: green;}
.div22{
margin-left:30px;margin-top:30px;
}
第一种
利用css的 position属性，把div2相对于div1的top、left都设置为50%，然后再用margin-top设置为div2的高度的负一半拉回来，用marg-left设置为宽度的负一半拉回来，css如下设置
<!DOCTYPE html>
demo
.div1{width:100px;height:100px;border:1pxsolid#000000;}
.div2{width:40px;height:40px;background-color: green;}
.div11{
position: relative;
}
.div22{
position: absolute;top:50%;left:50%;margin-top: -20px;margin-left: -20px;
}
第二种
还是用css的position属性，如下的html
<!DOCTYPE html>
demo
.div1{width:100px;height:100px;border:1pxsolid#000000;}
.div2{width:40px;height:40px;background-color: green;}
.div11{
position: relative;
}
.div22{
position: absolute;margin:auto;top:0;left:0;right:0;bottom:0;
}
第三种
利用css3的新增属性table-cell, vertical-align:middle;
<!DOCTYPE html>
demo
.div1{width:100px;height:100px;border:1pxsolid#000000;}
.div2{width:40px;height:40px;background-color: green;}
.div11{
display: table-cell;vertical-align: middle;
}
.div22{
margin: auto;
}
第四种
<!DOCTYPE html>
demo
.div1{width:100px;height:100px;border:1pxsolid#000000;}
.div2{width:40px;background-color: green;}
.div11{
display: table-cell;vertical-align: middle;
}
.div22{
margin: auto;
}
div居中方法
第五种方法
利用flexbox布局
直接在父元素上使用flexbox的布局
<!DOCTYPE html>
demo
.div1{
width:100px;
height:100px;
border:1pxsolid#000000;
}
.div2{
height:40px;
width:40px;
background-color: green;
}
.div11{
display: flex;
/*!*flex-direction: column;*!可写可不写*/
justify-content: center;
align-items: center;
}
第六种方法
利用transform的属性,注意子绝父相定位
缺点：需要支持Html5
<!DOCTYPE html>
demo
body{
margin:100pxauto;
position: relative;
}
.div1{
width:100px;
height:100px;
border:1pxsolid#000000;
background-color: red;
}
.div2{
height:40px;
width:40px;
background-color: green;
}
.center{
position: absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%, -50%);
-moz-transform:translate(-50%, -50%);
-o-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
我是外部盒子
我要居中
第七种
两者都要固定定位,不常用
缺点：需要设置position属性，网页复杂时容易扰乱页面布局,而且只是元素的起始位置居中
<html>
demo
.div1{
width:100px;
height:100px;
border:1pxsolid#000000;
background-color: red;
position: relative;
}
.div2{
height:40px;
width:40px;
background-color: green;
margin:30px30px;
}
.center{
position: fixed;
left:50%;
}
我要居中
第八种方法
网友评论