之前总结过水平居中的很多方法,但今天在《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. How to check sqlsever table data type identity status ?

    Unlike in Oracle, sqlserver has an special data type in order by make identity growth. But what abou ...

  2. 手写Tomcat

    学习JavaWeb之后,只知道如何部署项目到Tomcat中,而并不了解其内部如何运行,底层原理为何,因此写下此篇博客初步探究一下.学习之前需要知识铺垫已列出:Tomcat目录结构.HTTP协议.IO. ...

  3. yum仓库配置与内网源部署记录

    使用yum的好处主要就是在于能够自动解决软件包之间的依赖.这使得维护更加容易.这篇文章主要就是记录部署内网源的操作过程以及yum工具如何使用 因为需要.数据库要从Oracle迁移至MySQL.在部署M ...

  4. Golang robfig/cron 实现解析

    ​    robfig/cron是GO语言中一个定时执行注册任务的package,  最近我在工程中使用到了它,由于它的实现优雅且简单(主要是简单),所以将源码过了一遍,记录和分享在此. 文档:htt ...

  5. Hibernate4.x 报错 Space is not allowed after parameter prefix ':'

    1.问题描述  hibernate4.0使用原生sql:   (SELECT a.user_id,(@rowno:=@rowno+1) as rowno,a.goods_value FROM n_wo ...

  6. centos7.5下一键安装nginx-1.8.1

    #!/usr/bin/bash #安装依赖软件 yum install -y make cmake gcc gcc-c++ autoconf automake libpng-devel libjpeg ...

  7. 一文彻底搞懂 TCP三次握手、四次挥手过程及原理

    原创文章出自公众号:「码农富哥」,欢迎收藏和关注,如转载请注明出处! TCP 协议简述 TCP 提供面向有连接的通信传输,面向有连接是指在传送数据之前必须先建立连接,数据传送完成后要释放连接. 无论哪 ...

  8. Webpack 中 file-loader 和 url-loader 的区别

    如果我们希望在页面引入图片(包括img的src和background的url).当我们基于webpack进行开发时,引入图片会遇到一些问题. 其中一个就是引用路径的问题.拿background样式用u ...

  9. C语言四

    c语言循环结构 为什么用循环? C语言中的循环主要分为三种:while循环,do...while循环 for循环 while循环:先判断条件是否成立,如果条件成立将执行其下的循环体,如果条件不成立一次 ...

  10. 9种分布式ID生成之 美团(Leaf)实战

    整理了一些Java方面的架构.面试资料(微服务.集群.分布式.中间件等),有需要的小伙伴可以关注公众号[程序员内点事],无套路自行领取 更多优选 一口气说出 9种 分布式ID生成方式,面试官有点懵了 ...