引用：http://jinlong.github.io/blog/2013/08/13/centering-all-the-directions/

CSS 居中大全

AUG 13TH, 2013 | COMMENTS

我看最近微博流行 CSS 居中技术，老外码农争相写相关的文章，一篇赛一篇的长啊，我把几篇归纳总结了一下，算是笔记。 
孔乙己曾说：“茴香豆的回字有四种写法”，万一哪天有个面试官问你：“居中一共有几种写法”呢，哈哈，先备着吧~~ 
各种方法各有利弊，大家自己权衡吧，至少在需要居中时多个思路。

<center>

不建议用了。

text-align:center

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

vertical-align:middle

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

line-height

与 height 联手，垂直居中文字

margin:auto

示例：

1

2

3

4

5

<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%) 比较奇特，百分比计算不是以父元素为基准，而是以自己为基准。

参考文章：居中百分比宽高的元素

示例：

1

2

3

4

5

<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

1

2

3

4

5

6

7

8

.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

1

2

3

4

5

6

7

8

9

.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 也可以

1

2

3

4

5

6

7

8

9

10

11

.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 可以设置偏移。

1

2

3

4

5

6

7

8

9

.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%;）。

1

2

3

4

5

6

7

8

9

.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 。

1

2

3

4

5

6

7

8

9

10

11

.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;

1

2

3

4

5

6

7

.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 兼容性）。

1

2

3

4

5

6

7

8

.Absolute-Center.is-Variable {

  display: table;

  width: 50%;

  overflow: auto;

  margin: auto;

  position: absolute;

  top: 0; left: 0; bottom: 0; right: 0;

}

负 margin

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

1

2

3

4

5

6

7

8

9

.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

参考文章：Flexible height vertical centering with CSS, beyond IE7

结构：

1

2

3

4

5

6

7

<div class="Pos-Container is-Table">

  <div class="Table-Cell">

    <div class="Center-Block">

    &lt!-- CONTENT -->

    </div>

  </div>

</div>

样式：

1

2

3

4

5

6

7

8

9

.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

参考文章：Designing CSS Layouts With Flexbox Is As Easy As Pie

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

.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;

}

参考资料： 
* Absolute Horizontal And Vertical Centering In CSS 
* Absolute Centering in CSS 
* CENTERING ALL THE DIRECTIONS 
* Seven Ways of Centering With CSS 
* How to Center Anything With CSS 
* Vertical Centering With CSS

CSS 居中大全（转）的更多相关文章

  1. CSS 居中大全【转】

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

  2. CSS 居中大全(转)

    转自这里,收藏备用. <center> 不建议用了. text-align:center 在父容器里水平居中 inline 文字,或 inline 元素 vertical-align:mi ...

  3. CSS 居中大全

    <center> text-align:center 在父容器里水平居中 inline 文字,或 inline 元素 vertical-align:middle 垂直居中 inline 文 ...

  4. Web之CSS开发技巧: CSS 居中大全

    <center> text-align:center 在父容器里水平居中 inline 文字,或 inline 元素 vertical-align:middle 垂直居中 inline 文 ...

  5. HTML CSS 属性大全

    CSS 属性大全 文字属性 「字体族科」(font-family),设定时,需考虑浏览器中有无该字体. 「字体大小」(font-size),注意度量单位.<绝对大小>|<相对大小&g ...

  6. CSS样式大全（网络收集整理）

    CSS样式大全(网络收集整理 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 { ...

  7. CSS居中demo

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

  8. [转]CSS hack大全&详解

    转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...

  9. css居中那点事儿

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

随机推荐

  1. redis乐观锁（适用于秒杀系统）

    redis事务中的WATCH命令和基于CAS的乐观锁  在Redis的事务中,WATCH命令可用于提供CAS(check-and-set)功能.假设我们通过WATCH命令在事务执行之前监控了多个Key ...

  2. 易错java知识点总结(持续更新）

    1. 2.java转义字符的理解 参考知乎大神:http://www.zhihu.com/question/29232624 正向和逆向处理转义字符 正向:把两个字符 \ n 识别为一个转义字符 ne ...

  3. 模拟按下某快捷键：keybd_event使用方法

    keybd_event是函数功能:该函数合成一次击键事件.系统可使用这种合成的击键事件来产生WM_KEYUP或WM_KEYDOWN消息. Windows提供了一个模拟键盘API函数Keybd_even ...

  4. WPF命令（Command）介绍、命令和数据绑定集成应用

    要开始使用命令,必须做三件事: 一:定义一个命令 二:定义命令的实现 三:为命令创建一个触发器 WPF中命令系统的基础是一个相对简单的ICommand的接口,代码如下: public interfac ...

  5. [android] 新闻客户端实现左侧导航点击切换

    设置主布局文件,为根布局设置一个id,作为内容区 给ListView的条目设置点击事件,setOnItemClickListener()方法,参数:上下文 当前的Fragment实现OnItemCli ...

  6. 非常可乐（杭电hdu1495）bfs

      非常可乐 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  7. Vue 爬坑之路（十）—— Vue2.5 + Typescript 构建项目

    Typescript 在前端圈已经逐渐普及,Vue 2.5.0 改进了类型声明,使得对 TypeScript 更加友好 不过要想在项目中直接使用 TypeScript  仍然需要对项目进行一些改造 P ...

  8. BZOJ5322: [JXOI2018]排序问题

    传送门 不难看出期望就是 \(\frac{(n+m)!}{\prod_{v=1}^{max}(cnt_v!)}\),\(cnt_v\) 表示 \(v\) 这个数出现的次数. 贪心就是直接把 \(m\) ...

  9. html垂直居中

    参考于http://www.cnblogs.com/yugege/p/5246652.html <!DOCTYPE html> <html lang="en"&g ...

  10. Difference between nn.softmax & softmax_cross_entropy_with_logits & softmax_cross_entropy_with_logits_v2

    nn.softmax 和 softmax_cross_entropy_with_logits 和 softmax_cross_entropy_with_logits_v2 的区别   You have ...