如何让div处于body居中的状态 

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link rel="stylesheet" href="css/style.css" type="text/css">-->

</head>
<body>
<!--在body里添加“style="text-align: center;"这一句没有效果真正起作用的是下面的margin:auto;这一句”-->
<div style="margin-left:auto;margin-right:auto;width:50%;height:30px;background-color: aqua; padding:5%;">
    <div style="width:50%;background-color: bisque">
        <div style="width:50%;background-color: blueviolet"></div>
    </div>
</div>
</body>
</html>

 

浏览器默认从左往右渲染元素，在没有超出父容器的宽度的前提下  如果子容器的宽度能够被容纳  设置margin-right是没有用的

（这句话来自https://blog.csdn.net/zhangshab/article/details/80344704）

如果觉得有帮助的话也请支持下原作者。

posted @ 2018-11-25 15:04  林丶  阅读(9907)  评论(0)  编辑  收藏  举报