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是用于设置或对象中文本的对齐方式.一般情况下我们设置文本对齐方式的时候需要用此属性进行设置 我们 ...
随机推荐
- INTELLIJ MAC查看类结构快捷键
mac下intellij查看类结构快捷键有两种形式. 方法一 alt+7,通过窗口展示类结果,点击对应的方法,类中跳转到对应的位置,但此窗口并不会消失.如下图: 方法二 默认使用command+F12 ...
- 线程、进程概念与Android系统组件的关系
Android系统是Google公司基于Linux内核开发的开源手机操作系统.通过利用 Linux 内核的优势,Android 系统使用了大量操作系统服务,包括进程管理.内存管理.网络堆栈.驱动程序. ...
- 设计模式----行为型模式之命令模式(Command Pattern)
下面来自head first设计模式的命令模式一章节. 定义 将"请求"封装成对象,以便使用不同的请求.队列或者日志来参数化其他对象.命令模式也支持可撤销的操作. 类图 注: 1. ...
- Timed out after 30000 ms while waiting to connect
今天使用mongo-java-drive写连接mongo的客户端,着实被上面那个错坑了一把.回顾一下解决过程: 报错: com.mongodb.MongoTimeoutException: Timed ...
- 自己写的Weblogic的poc
""" 暂时只试用于Linux,先试试用一下反弹shell CVE-2017-10271的EXp """ import requests i ...
- 02-19 k近邻算法(鸢尾花分类)
[TOC] 更新.更全的<机器学习>的更新网站,更有python.go.数据结构与算法.爬虫.人工智能教学等着你:https://www.cnblogs.com/nickchen121/ ...
- B-微积分-sign(符号)函数
目录 sign(符号)函数 一.sign函数概述 二.python实现sign函数 更新.更全的<机器学习>的更新网站,更有python.go.数据结构与算法.爬虫.人工智能教学等着你:h ...
- 【JZOJ5329】-时间机器
[JZOJ5264]化学 Description Input Output Sample Input 3 10 1 2 10 Sample Output 5 Hint 题解: 这个题目又是一道贪心题, ...
- Mapper
public static T MapTo<T>(this object obj) { if (obj == null) return default(T); Mapper.CreateM ...
- Flask学习总结
Flask的使用以及返回值(其中Response后续详细单独补充) Flask的路由解读以及其配置 Flask的请求扩展 Flask中的cookie和session Flask中的request和re ...