<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. Linux 命令未自动提示补全

    解决方法: yum install -y bash-completion 退出当前界面,重新进入即可.

  2. Linux查看文件内容命令:more(转)

    Linux more命令类似cat ,不过会以一页一页的形式显示,更方便使用者逐页阅读,而最基本的指令就是按空白键(space)就往下一页显示,按b键就会往回(back)一页显示,而且还有搜寻字串的功 ...

  3. springmvc之@Controller、@RequestMapping等注解解说

    首先来看下一段代码: @Controller @RequestMapping("/user") public class UsersController { @RequestMap ...

  4. DevExpress14.1.2 xe XE6 高速安装

    之前在在网上下载的DevExpress14.1.2 xe-XE6都是一个个包文件.须要一个个去查找编译安装,并且须要有一定的顺序要求. 所下面载了好久了都没有安装. 近期在网上找了个旧版的安装方法.以 ...

  5. 在android中读写文件

    在android中读写文件 android中只有一个盘,正斜杠/代表根目录. 我们常见的SDK的位置为:/mnt/sdcard 两种最常见的数据存储方式: 一.内存 二.本地 1.手机内部存储 2.外 ...

  6. 用WPF做关于MEF 简单学习记录

    写在前面:下面学习所得多是从自http://www.cnblogs.com/comsokey/p/MEF1.html和http://www.cnblogs.com/yunfeifei/p/392266 ...

  7. thrift RPC 框架的自我搭建

    安装thrift rpc   安装的系统是Centos 7 未成功的方法 :(原因没找到,但是还是要记录下) 安装依赖库 yum install automake libtool flex bison ...

  8. BZOJ 1061费用流

    思路: 我们可以列出几个不等式 用y0带进去变成等式 下-上 可以消好多东西 我们发现 等式左边的加起来=0 可以把每个方程看成一个点 正->负 连边 跑费用流即可 //By SiriusRen ...

  9. ORACLE.错误码 ORA-12154 及Oracle客户端免安装版的设置

    .错误码 ORA-12154相信作为ORACLE数据库的开发人员没有少碰到“ORA-12154: TNS: 无法解析指定的连接标识符”,今天我也又碰到了类似的情况,将我的解决方法进行小结,希望能对碰到 ...

  10. ffmpeg编码

    1. 注册所有容器格式和CODEC:av_register_all()2. 打开文件:av_open_input_file()3. 从文件中提取流信息:av_find_stream_info()4. ...