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. 数据表管理admin

    知识预览 admin组件使用 admin源码解析 回到顶部 admin组件使用 Django 提供了基于 web 的管理工具. Django 自动管理工具是 django.contrib 的一部分.你 ...

  2. 采坑指南——k8s域名解析coredns问题排查过程

    正文 前几天,在ucloud上搭建的k8s集群(搭建教程后续会发出).今天发现域名解析不了. 组件版本:k8s 1.15.0,coredns:1.3.1 过程是这样的: 首先用以下yaml文件创建了一 ...

  3. Window下的VScode快捷键

    转载自4ark 全局 Ctrl + Shift + P, F1 显示命令面板 Ctrl + P 快速打开Ctrl + Shift + N 打开新窗口Ctrl + Shift + W 关闭窗口 基本 C ...

  4. 深入了解opacity和rgba

    1. rgba 首先它是一个属性值,语法为rgba(r,g,b,a) - r为红色值, 正整数 | 百分数 - g为绿色值,正整数 | 百分数 - b为蓝色值,正整数 | 百分数 - a为alpha( ...

  5. python接口自动化2-第一次发送get请求

    前言 Requests: 让 HTTP 服务人类,唯一的一个非转基因的 Python HTTP 库,人类可以安全享用: Requests继承了urllib2的所有特性,能满足当前网络的需求,支持Pyt ...

  6. 算法学习之剑指offer(六)

    题目1 题目描述 输入n个整数,找出其中最小的K个数.例如输入4,5,1,6,2,7,3,8这8个数字,则最小的4个数字是1,2,3,4,. import java.util.*; public cl ...

  7. 实验吧之【简单的sql注入 1、2、3】

    实验吧的三道sql注入(感觉实验吧大部分web都是注入) 简单的SQL注入 地址:http://ctf5.shiyanbar.com/423/web/ 这道题也是sql注入,输入1,页面显示正常,输出 ...

  8. 网络IO的虚拟化模型小结

    网络IO的虚拟化模型随着技术发展,出现了多种方式,例如emulation.para-virtualization.pass-through和SR-IOV等,本文试图对其做一个简单的总结. Emulat ...

  9. Spring Security 整合JWT(四)

    一.前言 本篇文章将讲述Spring Security 简单整合JWT 处理认证授权 基本环境 spring-boot 2.1.8 mybatis-plus 2.2.0 mysql 数据库 maven ...

  10. 数据结构1_java---单链表的操作,约瑟夫问题

    我们经常实用c++来建立链表,为了学习的方便,此处我使用java实现了对链表的增删改查功能 整个过程较为简单.仅供参考 流程: (1)通过内部类Node建立结点,内部变量作为指针域和数据域,并写下构造 ...