<center>

text-align:center

在父容器里水平居中 inline 文字,或 inline 元素


vertical-align:middle

垂直居中 inline 文字,inline 元素,配合 display:table ,display:table-cell,有奇效。


line-height

与 height 联手,垂直居中文字


margin:auto

示例:



<``style``>

#ex2_container { width:200px; background-color:yellow; }

#ex2_content { margin:0px auto; background-color:gray; color:white; display:table; }

</``style``>

<``div id="ex2_container"><``div id="ex2_content">Hello World</``div``></``div``>

hacks, hacks(小技巧)

有许多 hacks,负 margin,影子元素 ::before 等。如果你的内容不是固定大小的话,它们大部分是很脆弱的。


translate(-50%,-50%)

用 position 加 translate translate(-50%,-50%) 比较奇特,百分比计算不是以父元素为基准,而是以自己为基准。

示例:


<``style``> #ex3_container { width:200px; height:200px; background-color:yellow; position:relative; } #ex3_content { left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); background-color:gray; color:white; position:absolute; } </``style``> <``div id="ex3_container"><``div id="ex3_content">Hello World</``div``></``div``>

这个技巧相当嚣张,同样适用于没固定大小的内容,min-width,max-height,overflow:scroll 等。

绝对定位居中

父容器元素:position: relative


.Absolute-Center { width``: 50%``; height``: 50%``; overflow``: auto``; margin``: auto``; position``: absolute``; top``: 0``; left``: 0``; bottom``: 0``; right``: 0``; }

注意:高度必须定义,建议加 overflow: auto,防止内容溢出。

视口居中

内容元素:position: fixed,z-index: 999,记住父容器元素 position: relative


.Absolute-Center.is-Fixed { width``: 50%``; height``: 50%``; overflow``: auto``; margin``: auto``; position``: fixed``; top``: 0``; left``: 0``; bottom``: 0``; right``: 0``; z-index``: 999``; }

响应式

百分比宽高,最大、最小宽度均可以,加 padding 也可以


.Absolute-Center.is-Responsive { width``: 60%``; height``: 60%``; min-width``: 400px``; max-width``: 500px``; padding``: 40px``; overflow``: auto``; margin``: auto``; position``: absolute``; top``: 0``; left``: 0``; bottom``: 0``; right``: 0``; }

偏移

只要 margin: auto; 在,内容块将垂直居中,top, left, bottom, right 可以设置偏移。


.Absolute-Center.is-Right { width``: 50%``; height``: 50%``; margin``: auto``; overflow``: auto``; position``: absolute``; top``: 0``; left``: auto``; bottom``: 0``; right``: 20px``; text-align``: right``; }

溢出

居中内容比父容器高时,防止溢出,加 overflow: auto (没有任何 padding 时,也可以加 max-height: 100%;)。


.Absolute-Center.is-Overflow { width``: 50%``; height``: 300px``; max-height``: 100%``; margin``: auto``; overflow``: auto``; position``: absolute``; top``: 0``; left``: 0``; bottom``: 0``; right``: 0``; }

调整尺寸

resize 属性可以让尺寸可调。 设置 min- /max- 限制尺寸,确定加了 overflow: auto 。


.Absolute-Center.is-Resizable { min-width``: 20%``; max-width``: 80%``; min-height``: 20%``; max-height``: 80%``; resize: both``; overflow``: auto``; margin``: auto``; position``: absolute``; top``: 0``; left``: 0``; bottom``: 0``; right``: 0``; }

图像

图像同样适用,设置 height: auto;


.Absolute-Center.is-Image { width``: 50%``; height``: auto``; margin``: auto``; position``: absolute``; top``: 0``; left``: 0``; bottom``: 0``; right``: 0``; }

可变高度

高度必须定义,但可以是百分比或 max-height。不想定义高度的话,用 display: table (需要考虑 Table-Cell 兼容性)。


.Absolute-Center.is-Variable { display``: table; width``: 50%``; overflow``: auto``; margin``: auto``; position``: absolute``; top``: 0``; left``: 0``; bottom``: 0``; right``: 0``; }

负 margin

确切知道宽高,负 margin 是宽和高的一半。


.is-Negative { width``: 300px``; height``: 200px``; padding``: 20px``; position``: absolute``; top``: 50%``; left``: 50%``; margin-left``: -170px``; /* (width + padding)/2 */ margin-top``: -120px``; /* (height + padding)/2 */ }

Table-Cell

结构:


<``div class="Pos-Container is-Table"> <``div class="Table-Cell"> <``div class="Center-Block"> `` </``div``> </``div``> </``div``>

样式:


.Pos-Container.is-Table { display``: table; } .is-Table .Table-Cell { display``: table-cell``; vertical-align``: middle``; } .is-Table .Center-Block { width``: 50%``; margin``: 0 auto``; }

FlexBox


.Pos-Container.is-Flexbox { display``: -webkit-box; display``: -moz-box; display``: -ms-flexbox; display``: -webkit-flex; display``: flex; -webkit-box-align: center``; -moz-box-align: center``; -ms-flex-align: center``; -webkit-align-items: center``; align-items: center``; -webkit-box-pack: center``; -moz-box-pack: center``; -ms-flex-pack: center``; -webkit-justify-``content``: center``; justify-``content``: center``; }

这里推荐一下我的前端学习交流群:784783012,里面都是学习前端的,如果你想制作酷炫的网页,想学习编程。自己整理了一份2018最全面前端学习资料,从最基础的HTML+CSS+JS【炫酷特效,游戏,插件封装,设计模式】到移动端HTML5的项目实战的学习资料都有整理,送给每一位前端小伙伴,有想学习web前端的,或是转行,或是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入学习。

点击:加入

原文地址:https://segmentfault.com/a/1190000016896535

CSS 居中【整合】的更多相关文章

  1. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  2. CSS居中demo

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  3. css居中那点事儿

    css居中那点事儿 在css中对元素进行水平居中是非常简单的,然而使元素垂直居中就不是一件简单的事情了,多年以来,垂直居中已经成为了CSS领域的圣杯,因为它是极其常见的需求,但是在实践中却不是一件简单 ...

  4. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

  5. CSS居中完全解决方案

    上次面试面试官问到了,问了个定宽局中和不定宽局中,下来我把所有有关CSS居中都总结了一下 原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 水平居中 行内元素 把行内元素 ...

  6. 理解CSS居中

    我想很多在前端学习或者开发过程中,肯定会遇到如何让你的元素居中的问题,网上google肯定会有很多的解决方法.今天我就个人的项目与学习经验谈谈个人理解css如何让元素居中. 要理解css的居中,首先必 ...

  7. CSS 居中大全【转】

    我看最近微博流行 CSS 居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:“茴香豆的回字有四种写法”,万一哪天有个面试官问你:“居中一共有几种写法 ...

  8. CSS居中的实现用法实例

    转载的一篇文章,讲解css内容居中的. 网上有关css 居中的文章不胜枚举,不过大多没有做系统的总结.这里分享的这篇有关css居中的文章,个人感觉不错,值得收藏. 一.水平居中1,将元素水平居中(us ...

  9. 各种div+css居中方式调整(转载)

    盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码   目录(?) ...

  10. CSS居中方法

    css居中方法非常多,根据工作的实际情况采用恰当方法,可取到事半功倍的效果. 就常见的一些居中方法整理如下: 代码如下: <div class="con"> <d ...

随机推荐

  1. POJ 2762 Going from u to v or from v to u?(强联通,拓扑排序)

    id=2762">http://poj.org/problem?id=2762 Going from u to v or from v to u? Time Limit: 2000MS ...

  2. 【SQLSERVER】MD5注意事项

    sql中使用MD5加密是很常见的事情,但是不知道注意点的人还是会即便是拷贝网络上的写法也是会出现错误的. 举个例子简单说明: 由上图我们可以发现相同的字符串但是得到的MD5加密的字符却是不相同的,那么 ...

  3. 多人即时战斗游戏服务端系列[2]--90坦克Online游戏对象介绍以及渲染机制

    先上类图,略大,点击此处放大: 1.先说下方接口 1.1 场景物品接口 ISceneObject : OpLog.IOpItem, IStackPoolObject 全部场景对象的基本接口,包含类型定 ...

  4. Linux 管道是什么 ?原理

    简单点就是说,一个命令的结果作为另外一个命令(结果)的输入 . 管道是linux提供的一种常见的进程通信工具,也是很多shell命令能够灵活组合产生强大用途的一个重要工具. 管道是什么? 管道,顾名思 ...

  5. 利用SQLite在android上实现增删改查

    利用SQLite在android上实现增删改查 方法: 一.直接利用database.execSQL()方法输入完整sql语句进行操作 这种方法适用于复杂的sql语句,比如多表查询等等 这里适合于增删 ...

  6. Node.js:路由

    ylbtech-Node.js:路由 1.返回顶部 1. Node.js 路由 我们要为路由提供请求的 URL 和其他需要的 GET 及 POST 参数,随后路由需要根据这些数据来执行相应的代码. 因 ...

  7. Xcode7.3 使用NSURLSession发送HTTP请求报错

    控制台打印:Application Transport Security has blocked a cleartext HTTP (http://) resource load since it i ...

  8. django 实现websocket

    一.简述:django实现websocket,之前django-websocket退出到3.0之后,被废弃.官方推荐大家使用channels. channels通过升级http协议 升级到websoc ...

  9. 全局变量变为局部变量 & MVC思想

    1 函数中的全局变量如何变成局部变量? 全局变量之间会相互骚扰.所以在代码中不要用全局变量.ES6之前只有函数里面有全局变量. 全局变成局部变量怎么变? 把代-放在一个函数如中,再.call()执行一 ...

  10. python 模块导入详解

    本文不讨论 Python 的导入机制(底层实现细节),仅讨论模块与包,以及导入语句相关的概念.通常,导入模块都是使用如下语句: import ... import ... as ... from .. ...