margin:0 auto为何会居中?
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为何会居中?的更多相关文章
- IE下margin:0 auto为什么不居中?
http://blog.sina.com.cn/s/blog_68c6be330101k7kn.html 我们经常用DIV+CSS布局网页的时候,正常情况下需要将div居中显示时,使用Css样式:ma ...
- 图片margin:0 auto;为何不居中
图片margin:0 auto;为何不居中 关键: img元素 display设为block 代码: <!DOCTYPE html> <html> <head> & ...
- css中两种居中方式text-align:center和margin:0 auto 的使用场景
关于使用text-align:center和margin:0 auto 两种居中方式的比较 前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚 ...
- margin:0 auto;不居中
margin:0 auto:不居中可能有以下两个的原因; 1.没有设置宽度<div style="margin:0 auto;"></div>看看上面的代码 ...
- 在ie浏览器,360浏览器下,margin:0 auto;不居中的原因
转自 http://blog.sina.com.cn/s/blog_6eef6bf60100nn4m.html margin:0 auto:不居中可能有以下两个的原因 没有设置宽度 看看上面的代码,根 ...
- CSS样式margin:0 auto不居中
<style type="text/css">html,body{height:100%;width:960px;}.container{background-colo ...
- 绝对定位后,position:absolute;不能使用margin: 0 auto;实现居中;
声明: web小白的笔记,欢迎大神指点!联系QQ:1522025433. 我们都知道margin: 0 auto:可也实现块状元素的水平居中:但是对于绝对顶为的元素就会失效: 请看实例: <!d ...
- IE8 margin:0 auto 不能居中显示的问题
ie8下面margin:0 auto;不能居中的解决方案,ie8兼容性代码 今天写了个div,用margin:0 auto:来定义他的属性,让他居中,结果,竟然无效. 一开始以为是css里的代码冲突了 ...
- 正确的使用margin:0 auto与body{text-align:center;}实现元素居中(转)
body{text-align:center}与margin:0 auto的异同? text-align是用于设置或对象中文本的对齐方式.一般情况下我们设置文本对齐方式的时候需要用此属性进行设置 我们 ...
随机推荐
- php有关数据推荐
# PHP<PHP程序设计>(第2版) --PHP语法和入门最好的书<PHP5权威编程> --PHP入门后升级书<深入PHP:面向对象.模式与实践>(第3版) ...
- python编程基础之三十八
正则表达式:正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成一个“规则字符串”,这个“规则字符串”用来表达对字符串的一种过滤逻辑. 需要引入内置模块r ...
- python requests-toolbelt 生成上传multipart/form-data格式数据
需求背景 想使用requests做一个自动上传的功能,发现这里问题挺多的,就记录一下. 如上图上传功能,一般分为input标签,非input标签.我这里也不管什么标签,直接抓包看数据流. Conten ...
- LAMP环境部署物联网项目
今天来在LAMP环境下搭建一个PHP项目,开始之前,先来普及下物联网常识: 物联网,即Internet of Things,简写IOT.让所有能行使独立功能的普通物体实现互联互通的网络,通过物联网可以 ...
- RF自定义库和关键字
1:在D:\work_software\python\Lib\site-packages 文件夹下, 新建python package文件夹 ,例如我的是TestLibrary 建好后的完整路径:D: ...
- C、C++的Makefile模板
目录 Makefile模板 用法 编译C程序 编译C++程序 其他 Tips Makefile模板 CC = gcc LD = $(CC) TARGET = $(notdir $(CURDIR)) S ...
- [网络流 24 题] luoguP2763 试题库问题
[返回网络流 24 题索引] 题目描述 假设一个试题库中有 nnn 道试题.每道试题都标明了所属类别.同一道题可能有多个类别属性.现要从题库中抽取 mmm 道题组成试卷.并要求试卷包含指定类型的试题. ...
- .NET Core3.0创建Worker Services
.NET CORE 3.0新增了Worker Services的新项目模板,可以编写长时间运行的后台服务,并且能轻松的部署成windows服务或linux守护程序.如果安装的vs2019是中文版本,W ...
- java与java web数组括号的不同
由于之前学JAVA SE数组时习惯了数组括号的写法,到了Web这里写了有点不太习惯了,赶快写篇博客加深一下印象哈 一. java和java web中的数组的不同 java: int[] arr = n ...
- ElasticSearch Bulk API
做一个简单的记录,以便自己后续查找 一.环境要求 ElasticSearch 7.3.0 Kibana 7.3.0 二.详情 ElasticSearch 的 Bulk API 可以批量进行索引或者删除 ...