<!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. JVM系列(四)— 原子性、可见性与有序性

    上一篇讲了Java内存模型的相关知识,模型设计正是围绕着并发过程中如何处理原子性,可见性和有序性这3个特征来建立的 一.原子性(Atomicity) 原子性的概念无需多说,熟悉事物的4个特性的应该比较 ...

  2. svn both sides of the move must be committed together

    从一个模块移动文件到另一个模块下,提交的时候报错. 选择2个模块工程,team-与资源库同步 选择2个模块下,2份文件,一份减号图标,一份加号图标,同时提交. 还有种情况,当你重名文件后,提交报错 打 ...

  3. elasticsearch java 索引操作

    1.添加maven依赖 <dependency> <groupId>org.elasticsearch</groupId> <artifactId>el ...

  4. vue:element-ui输入框绑定回车事件

    参考: https://segmentfault.com/q/1010000011347642 https://weiku.co/article/297/ vue监听input输入框的回车事件:key ...

  5. win8 风格框架

    http://metroui.org.ua/挺不错 bootstrap 系列的.

  6. CentOS使用rpm离线安装mariadb

    本文不再更新,可能存在内容过时的情况,实时更新请移步原文地址:CentOS使用rpm离线安装mariadb: 环境: CentOS Linux release 7.6.1810 (Core) mari ...

  7. rabbitmq类

    1.accept.php消费者代码需要在命令行执行 2.'username'=>'asdf','password'=>'123456' 改成自己的帐号和密码 RabbitMQCommand ...

  8. 前端页面布局之Grid布局

    在讲布局前,先说两句题外话,写博时,突然想到了郭德纲说过的一个段子“说两个人骂架,不是你有理,你嗓门大,你唾沫星子崩我一脸,你就能骂赢,要看谁命长,过两年你死了,我站你坟头咋说咋是对的,你在那小匣里还 ...

  9. 20191004-gugugu公告

    作者洗手不干了,所以以后可能会不写考试反思而是要写题解了…… ××这是$Day7$,于是我跪了 (不会,于是准备自己$YY$) 加油啊$LNC$你一定能$AK$的(雾 但是他因为太愧疚而没有打症结而是 ...

  10. sqlserver 下三种批量插入数据的方法

    本文将介绍三种批量插入数据的方法,需要的朋友可以参考下 本文将介绍三种批量插入数据的方法.第一种方法是使用循环语句逐个将数据项插入到数据库中:第二种方法使用的是SqlBulkCopy,使您可以用其他源 ...