margin: 0 auto;为何会居中呢???

  • 一开始的学习html的时候,就是只知道块级元素margin:0 auto就能居中

但是后来就很好奇

  • margin: auto 0;为何不能垂直居中?
  • margin: 0 auto 0 0;如果只设置一个margin会发生什么?

现在我们就开始学一下

  • 首先如果想要设置居中,width是必须设置的,如果不设置width元素,那么块级元素一定会占据100%的宽度,margin:0 auto的auto是指平分剩余空间,比如宽度为200,父元素的宽度为1000,那么auto就是指水平方向平分剩余的宽度(1000-200/2)
div{
height: 200px;
width: 200px;
background: red;
margin: 0 auto;
}

那么如果只有一侧设置了auto会产生什么效果

div{
height: 200px;
width: 200px;
background: red;
margin-left: auto;
}



他竟然靠在了右侧

  • 因为他只设置了左侧为auto,那么父元素剩余的空间都会分给左侧,就实现了float:left;的效果

    做到了这一步我感觉实在是太神奇了啊,他竟然可以代替浮动的效果

那么如何垂直方向居中呢

  • 这里面我要强调一下,垂直方向不可以margin: auto 0
  • 主要的原因就是垂直方向,我们没有剩余的空间

    那么我们就不能垂直方向居中了吗???,当然是可以的,我们来试一下
div{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
height: 200px;
width: 200px;
background: red;
}

  • 原理: 如果设置了绝对定位并且上下左右全部为0(不能只设置上左或者其他的任意两方向),那么他会填充整个父元素的所有可用空间,那么auto就有了作用,会平均分配剩余的空间

  • 分享不易,感谢star-

margin:0 auto为何会居中?的更多相关文章

  1. IE下margin:0 auto为什么不居中?

    http://blog.sina.com.cn/s/blog_68c6be330101k7kn.html 我们经常用DIV+CSS布局网页的时候,正常情况下需要将div居中显示时,使用Css样式:ma ...

  2. 图片margin:0 auto;为何不居中

    图片margin:0 auto;为何不居中 关键: img元素 display设为block 代码: <!DOCTYPE html> <html> <head> & ...

  3. css中两种居中方式text-align:center和margin:0 auto 的使用场景

    关于使用text-align:center和margin:0 auto 两种居中方式的比较 前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚 ...

  4. margin:0 auto;不居中

    margin:0 auto:不居中可能有以下两个的原因; 1.没有设置宽度<div style="margin:0 auto;"></div>看看上面的代码 ...

  5. 在ie浏览器,360浏览器下,margin:0 auto;不居中的原因

    转自 http://blog.sina.com.cn/s/blog_6eef6bf60100nn4m.html margin:0 auto:不居中可能有以下两个的原因 没有设置宽度 看看上面的代码,根 ...

  6. CSS样式margin:0 auto不居中

    <style type="text/css">html,body{height:100%;width:960px;}.container{background-colo ...

  7. 绝对定位后,position:absolute;不能使用margin: 0 auto;实现居中;

    声明: web小白的笔记,欢迎大神指点!联系QQ:1522025433. 我们都知道margin: 0 auto:可也实现块状元素的水平居中:但是对于绝对顶为的元素就会失效: 请看实例: <!d ...

  8. IE8 margin:0 auto 不能居中显示的问题

    ie8下面margin:0 auto;不能居中的解决方案,ie8兼容性代码 今天写了个div,用margin:0 auto:来定义他的属性,让他居中,结果,竟然无效. 一开始以为是css里的代码冲突了 ...

  9. 正确的使用margin:0 auto与body{text-align:center;}实现元素居中(转)

    body{text-align:center}与margin:0 auto的异同? text-align是用于设置或对象中文本的对齐方式.一般情况下我们设置文本对齐方式的时候需要用此属性进行设置 我们 ...

随机推荐

  1. php有关数据推荐

    # PHP<PHP程序设计>(第2版)  --PHP语法和入门最好的书<PHP5权威编程>  --PHP入门后升级书<深入PHP:面向对象.模式与实践>(第3版) ...

  2. python编程基础之三十八

    正则表达式:正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑. 需要引入内置模块r ...

  3. python requests-toolbelt 生成上传multipart/form-data格式数据

    需求背景 想使用requests做一个自动上传的功能,发现这里问题挺多的,就记录一下. 如上图上传功能,一般分为input标签,非input标签.我这里也不管什么标签,直接抓包看数据流. Conten ...

  4. LAMP环境部署物联网项目

    今天来在LAMP环境下搭建一个PHP项目,开始之前,先来普及下物联网常识: 物联网,即Internet of Things,简写IOT.让所有能行使独立功能的普通物体实现互联互通的网络,通过物联网可以 ...

  5. RF自定义库和关键字

    1:在D:\work_software\python\Lib\site-packages 文件夹下, 新建python package文件夹 ,例如我的是TestLibrary 建好后的完整路径:D: ...

  6. C、C++的Makefile模板

    目录 Makefile模板 用法 编译C程序 编译C++程序 其他 Tips Makefile模板 CC = gcc LD = $(CC) TARGET = $(notdir $(CURDIR)) S ...

  7. [网络流 24 题] luoguP2763 试题库问题

    [返回网络流 24 题索引] 题目描述 假设一个试题库中有 nnn 道试题.每道试题都标明了所属类别.同一道题可能有多个类别属性.现要从题库中抽取 mmm 道题组成试卷.并要求试卷包含指定类型的试题. ...

  8. .NET Core3.0创建Worker Services

    .NET CORE 3.0新增了Worker Services的新项目模板,可以编写长时间运行的后台服务,并且能轻松的部署成windows服务或linux守护程序.如果安装的vs2019是中文版本,W ...

  9. java与java web数组括号的不同

    由于之前学JAVA SE数组时习惯了数组括号的写法,到了Web这里写了有点不太习惯了,赶快写篇博客加深一下印象哈 一. java和java web中的数组的不同 java: int[] arr = n ...

  10. ElasticSearch Bulk API

    做一个简单的记录,以便自己后续查找 一.环境要求 ElasticSearch 7.3.0 Kibana 7.3.0 二.详情 ElasticSearch 的 Bulk API 可以批量进行索引或者删除 ...