引用: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-widthmax-heightoverflow: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: fixedz-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. Extjs 项目中常用的小技巧,也许你用得着(4)---Extjs 中的cookie设置

    1.ExtJs设置cookie两种方式 其一:设置cookie如下 saveacct=isForm.getForm().findField('itemselector').getValue(); Ex ...

  2. $.ajax()参数详解及标准写法(转)

    1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...

  3. TCP/IP 基础简介

    引言本篇属于TCP/IP协议的基础知识,重点介绍了TCP/IP协议簇的内容.作用以及TCP.UDP.IP三种常见网络协议相关的基础知识. 内容TCP/IP协议簇是由OSI七层模型发展而来的,之所以存在 ...

  4. POJ2955(KB22-C 区间DP)

    Brackets Time Limit: 1000MSMemory Limit: 65536K Total Submissions: 7823Accepted: 4151 Description We ...

  5. [World Final 2016] Branch Assignment

    链接 PDF bzoj 先求出正置边和反置边时b+1到前b个点的最短路dis[0/1][x](x∈[1,b]), 令D[x]=dis[0][x]+dis[1][x] 然后分组后每个x对代价的贡献为D[ ...

  6. 从零开始学习html(十三) CSS代码缩写,占用更少的带宽

    一.盒模型代码简写 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...

  7. jquery判断浏览器的内核

    <script type='text/javascript'> $(function(){ if($.browser.msie) { alert("IE浏览器"); } ...

  8. Navicat Premium 12连接Oracle时提示oracle library is not loaded的问题解决

    Navicat Premium 12连接Oracle时提示oracle library is not loaded的问题解决 链接时遇到的问题,记录一下 如果还没有安装工具,请参考:Navicat P ...

  9. 第一篇 Windows docker 概述

    本人行业属于智能制造,偏向工厂应用,客户端程序全部是.Net 的 WinForm:本系统的后台是.Net,多系统交互的有java的:因系统发布效率问题,想采用docker Windows 的生产力环境 ...

  10. alpha阶段 代码结构及技术难点简介

    我们的产品是安卓端app,所以目前主要就是用Android Studio来进行代码开发. Android Studio的项目的结构还是比较清晰的,如下图,主要就是java文件夹内的代码部分(.java ...