之前总结过水平居中的很多方法,但今天在《css世界》这本书里看到margin的一个特性,一行代码就搞定很实用,分享一下

margin: auto能在块级元素设定宽高之后自动填充剩余宽高。margin: auto自动填充触发的前提条件是元素在对应的水平或垂直方向具有自动填充特性,显然默认情况下块级元素的高度是不具备这个条件的。典型应用是块级元素水平局中的实现:

display: block;
width: 200px;
margin: 0 auto;

auto的特性是,如果两侧都是auto,则两侧均分剩余宽度;如果一侧margin是固定的,另一侧是auto,则这一侧auto为剩余宽度。例子↓

是不是很方便

当然除了水平方向,垂直方向的margin也能实现垂直居中,但是需要元素在垂直方向具有自动填充特性,而这个特性可以利用position实现:

.mm>div{

position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
width: 200px;
height: 200px;
margin: auto;}

一个margin就可以让块状元素响应居中,很实用的更多相关文章

  1. html+css--水平居中总结(不定宽块状元素方法)(一)

    来源:http://www.imooc.com/code/6363 在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中,比如网页上的分页导航,因为分页的数量是不确定的,所以我们不能通过设置宽度 ...

  2. 小tip: margin:auto实现绝对定位元素的水平垂直居中

    转载自:http://www.zhangxinxu.com/wordpress/?p=3794 一.绝对定位元素的居中实现 如果要问如何CSS实现绝对定位元素的居中效果,很多人心里已经有答案了. 兼容 ...

  3. css绝对定位元素实现居中的几个方法

    一:CSS绝对定位元素left设为50%实现水平居中 绝对定位的元素left设为50%时,是已左上角为原点的,所以只要再使用margin属性添加负值补偿回来即可.示例:[css]代码如下: #boar ...

  4. 定宽块状元素居中 1记(text-align/margin:0 auto)

    对于text-align:center的用法只是针对文本相对于父元素的居中,例如: #jz2{ width:300px; margin: 10px auto; border:2px solid red ...

  5. 本周汇总 动态rem适配移动端/块状元素居中/透明度

    1.动态rem适配移动端 !function(){ var width = document.documentElement.clientWidth; var head=document.getEle ...

  6. html+css--水平居中总结-不定宽块状元素方法(三)

    来源:http://www.imooc.com/code/6365 除了前两节讲到的插入table标签,以及改变元素的display类型,可以使不定宽块状元素水平居中之外,本节介绍第3种实现这种效果的 ...

  7. html+css-水平居中-不定款块状元素方法(二)

    来源:http://www.imooc.com/code/6364 除了上一节讲到的插入table标签,可以使不定宽块状元素水平居中之外,本节介绍第2种实现这种效果的方法,改变元素的display类型 ...

  8. html+CSS--水平居中设置(定宽块状元素)

    来源:http://www.imooc.com/code/4336 当被设置元素为 块状元素 时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素. ...

  9. div里面的元素垂直均匀分布 按钮引发地址栏出现问号 判断一个数组是否为空 div底部居中 路由传参接受参数

    一个固定高度的div的子元素 在垂直 方向上平均分布 .important-dec{ height: 121px; flex-direction: column; display: flex; jus ...

随机推荐

  1. 如何查看dll或者exe是X86还是X64架构

    使用VS里面的dumpbin.exe 用法:dumpbin /headers *.exe(需要运行vcvarsall.bat) C32 or Winhex PE  L为x86.PE  d†为x64 P ...

  2. 【5min+】 这些C#的运算符您都认识吗?

    系列介绍 [五分钟的dotnet]是一个利用您的碎片化时间来学习和丰富.net知识的博文系列.它所包含了.net体系中可能会涉及到的方方面面,比如C#的小细节,AspnetCore,微服务中的.net ...

  3. 中小企业自建云WAF有多难?只需20分钟!而且:全程免费!

    以往,运营型的web为了安全目的,才使用WAF进行安全防护. 而现如今,WAF对企业web来说,已然成了刚需.为何?等保.网络安全法的硬性要求! 当然,这样要求显然是对的:没有网络安全,就没有国家安全 ...

  4. 动态规划------背包问题(c语言)

    /*背包问题: 背包所能容纳重量为10:共五件商品,商品重量用数组m存储m[5]={2,2,6,5,4}, 每件商品的价值用数组n存储,n[5]={6,3,5,4,6};求背包所能装物品的最大价值. ...

  5. To use the new Server Discover and Monitoring engine, pass option { useUnifiedTopology: true } to the MongoClient constructor.

    mongoose报错:DeprecationWarning: current Server Discovery and Monitoring engine is deprecated, and wil ...

  6. python之基础中的基础(二)

    1.字典 创建字典,alien_0={'color':'green','points':5}其中由一个又一个的“键-值”对组成. 访问键-值对相应的值,print(alien_0['color']), ...

  7. cache和内存屏障

    1 cache简介 1.1 cache缓存映射规则 tag查看cache是否匹配,set index |tag |set index |block offset ||20-bit |7-bit |5b ...

  8. go每日新闻--2020-02-19

    gocn_news_2020-02-19 1.使用 t.Cleanup 做测试收尾 https://ieftimov.com/post/testing-in-go-clean-tests-using- ...

  9. Javascript 基础学习(五)js 的运算符

    通过运算符可以对一个或多个值进行运算,并且一定有运算结果返回 算数运算符 ​ 算数运算符包括相加(+).相减(-).相乘(*).相除(/).取模(%).任何值与字符串相加都会转换为字符串,做的是字符串 ...

  10. cesium1.63.1api版本贴地贴模型量算工具效果(附源码下载)

    前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材.不少 ...