<!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）
如果觉得有帮助的话也请支持下原作者。