<!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）

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

如何让div处于body居中的状态的更多相关文章

  1. CSS实现DIV水平自适应居中

    DIV水平自适应居中 <!DOCTYPE html> <html lang="cn"> <head> <meta charset=&quo ...

  2. 如何让div上下左右都居中

    在做登陆页面的话,需要login的div 上下左右都居中. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ...

  3. 常用布局，div竖直居中

    常用两列布局,多列布局和div竖直居中 body { margin:; padding:; } .w200 { width: 200px; } .mar-left200 { margin-left: ...

  4. div元素上下左右居中

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. 子进程 已安装 post-installation 脚本 返回错误状态 1，dpkg: 处理软件包 python-crypto (--configure)时出错： 该软件包正处于非常不稳定的状态；

    这几天在学习redis的时候,装软件总是报错,两个问题都和dpkg有关,上网查阅了些解决办法,发现整体来说执行以下方法均可解决. 虽然每个人需要安装的包不同,但是出现此类问题的不同也只有安装包的名字, ...

  6. MySQL5.6 大量SQL语句处于Writing to net状态的案例分析

    [问题现象] 开发同事反馈有应用在21:00-22:00之间出现大量超时报错. [问题分析] 1. 从DB服务器慢查询指标来看,18:00后有大量的慢查询,累计产生了约9000条慢查询 2. 测试直接 ...

  7. div设置了居中和宽度，但是显示时宽度占100%

    <div id="bigDiv" align="center"> <div id="bottom" style=" ...

  8. 如何让图片在div里左右居中，上下居中

    如何让图片在div里左右居中,上下居中 转载▼   1.要想让图片左右对齐,我们可以在div里写入"style:text-align:center;"代码来实现. 2.要想使图片居 ...

  9. DIV的绝对居中

    来源:http://www.cnblogs.com/damonlan/archive/2012/04/28/2473525.html 作者:浪迹天涯 很多时候,我们需要在浏览器中让一个div居中进行显 ...

随机推荐

  1. CentOS源码安装Wireshark

    (2019年2月19日注:这篇文章原先发在自己github那边的博客,时间是2016年8月25日) Wireshark为网络管理员常用的一个网络管理工具,通过使用这个软件,我们可以对本机网卡上的经过的 ...

  2. 05-3-style标签属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 2019-5-21-C#-在-构造函数添加-CallerMemberName-会怎样

    title author date CreateTime categories C# 在 构造函数添加 CallerMemberName 会怎样 lindexi 2019-05-21 11:28:32 ...

  4. python jieba模块详解

    借鉴于 [jieba 模块文档] 用于自己学习和记录! jieba 模块是一个用于中文分词的模块 此模块支持三种分词模式 精确模式(试图将句子最精确的切开,适合文本分析) 全模式(把句子在所有可以成词 ...

  5. 跟我一起了解koa之koa的cookie（三）

    代码中写入 然后我们每次刷新浏览器,代码里面的pvid都会改变 我们可以读取cookie 访问json数据出现结果

  6. Vscode中问题

    1.VScode中如果安装vim插件,那么编辑代码时会默认使用vim 2.出现任何问题都在设置的首选项里面修改,比如终端无法复制,或者终端右击的默认操作等

  7. ionic Hide tabs 实现

    1.指令代码 directiveMod.directive('hideTabs',function($rootScope){ return { restrict:'AE', link:function ...

  8. Spring Cloud Eureka集群配置及注意事项(Greenwich版本)

    Spring Cloud Eureka集群配置及注意事项(Greenwich版本) 一·概述 Spring Cloud Netflix Eureka 是一个提供服务注册与发现的套件.服务提供者只需要将 ...

  9. vscode, eslint, prettier, vetur冲突及解决

    这3工具都必须安装. 但是安装之后, 规则冲突又让人头疼. 讲下解决方案吧.一 从0开始1. 禁止工作区插件, 如下图:  2. 清空用户设置(Code–>首选项–>设置–>[右上角 ...

  10. GULP入门(一)

    1.首先要先装node.然后在命令行里安装全局的gulp: npm install --global gulp 这是gulp在的生成的位置 2.接下来,我们需要将gulp安装到项目本地 npm ins ...