CSS 居中大全

我看最近微博流行 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 居中大全

时间: 2024-10-13 22:01:57

CSS 居中大全的相关文章

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

<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

CSS居中集合&amp;图片视口最大化

http://www.w3cplus.com/css/vertically-center-content-with-css CSS制作水平垂直居中对齐(分别介绍水平和垂直居中的方法,优缺点分析) http://www.cnblogs.com/rubylouvre/p/3274273.html CSS 居中大全(比较全面的居中方法) http://www.zhangxinxu.com/wordpress/?p=3794 张大神:margin:auto实现绝对定位元素的水平垂直居中 http://w

css属性大全

SS 属性大全文字属性「字体族科」(font-family),设定时,需考虑浏览器中有无该字体.「字体大小」(font-size),注意度量单位.<绝对大小>|<相对大小>|<长度>|<百分比>(一般设置双数)「字体加粗」(font-weight),除了 normal(正常).bold(粗体).bolder(特粗).lighter(细体)外,还有9种以像素为度量为单位的设置方式(100,200,300,400,500,600,700,800,900).「字体

CSS 样式大全

css 样式大全 Posted on 2016-10-14 11:08 奔跑的葛根 阅读(0) 评论(0) 编辑 收藏 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 {font-style: oblique;}(偏斜体) italic;(斜体) normal;(正常) 行高 {line-height: normal;}(正常) 单位:PX.PD.EM 粗细 {font-wei

CSS 属性大全

1. 文字属性 「字体族科」(font-family),设定时,需考虑浏览器中有无该字体.  「字体大小」(font-size),注意度量单位.<绝对大小>|<相对大小>|<长度>|<百分比>(一般设置双数)  「字体加粗」(font-weight),除了 normal(正常).bold(粗体).bolder(特粗).lighter(细体)外,还有9种以像素为度量为单位的设置方式(100,200,300,400,500,600,700,800,900). 

CSS居中完全解决方案

上次面试面试官问到了,问了个定宽局中和不定宽局中,下来我把所有有关CSS居中都总结了一下 原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 水平居中 行内元素 把行内元素嵌套在一个DIV中,并且在DIV中设置以下样式 a{ text-align: center; } 块级元素 对于定宽的块级元素,我们要设置起margin-top,margin-right 为auto .center{ margin: 0 auto; } 多个块级元素(inline-block) 多个

CSS Hack大全-可区分出IE6-IE10、FireFox、Chrome、Opera

今天把一些常用的CSS Hack整理了一下,包括常用的IE hack以及火狐.Chrome.Opera浏览器的Hack,并把这些CSS Hack综合的一起,写了一个小的浏览器测试器.如图所示: 下面就来看一下代码吧: html部分: 1 2 3 4 5 6 7 8 9 10 11 12 13 <div class="content">     <div class="test"></div>     <div class=&

css居中问题

学习过程中遇到css居中问题 , 也查阅了资料,每个人的方法都不尽相同,而且当时看懂了,过后就记混淆了;so作为一个前端小白,也来写一下俗话说好脑子不如烂笔头,毕竟自己知道的也不多,其实是抱着学习和交流的态度啦.话不多说,直接来(注:本文中的属性都是在chrome浏览器下试验的); 一 : 一个父盒子,一个子盒子如何居中(高度已知) 最简单的一种: 就是使用定位,父盒子relative,子盒子absolute,然后子盒子left和top值各50%;在设置margin值,left和top值是本身盒

[译]CSS居中

CSS居中一直是一个棘手的问题,偶然在网上看到一篇介绍的文章,总结的很详细. 原文地址:http://css-tricks.com/centering-css-complete-guide/ 用了两天翻译了下,但水平实在有限. 阅读地址:https://github.com/zjzhome/center-in-css/blob/master/center-in-css.md