CSS 居中大全(转)
引用: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 |
|
hacks, hacks(小技巧)
有许多 hacks ,负 margin,影子元素 ::before 等。如果你的内容不是固定大小的话,它们大部分是很脆弱的。
translate(-50%,-50%)
用 position 加 translate translate(-50%,-50%) 比较奇特,百分比计算不是以父元素为基准,而是以自己为基准。
参考文章:居中百分比宽高的元素
示例:
1 |
|
这个技巧相当嚣张,同样适用于没固定大小的内容,min-width
,max-height
,overflow:scroll
等。
绝对定位居中
父容器元素:position: relative
1 |
|
注意:高度必须定义,建议加 overflow: auto
,防止内容溢出。
视口居中
内容元素:position: fixed
,z-index: 999
,记住父容器元素 position: relative
1 |
|
响应式
百分比宽高,最大、最小宽度均可以,加 padding 也可以
1 |
|
偏移
只要 margin: auto;
在,内容块将垂直居中,top, left, bottom, right 可以设置偏移。
1 |
|
溢出
居中内容比父容器高时,防止溢出,加 overflow: auto
(没有任何 padding 时,也可以加 max-height: 100%;
)。
1 |
|
调整尺寸
resize 属性可以让尺寸可调。 设置 min- /max- 限制尺寸,确定加了 overflow: auto
。
1 |
|
图像
图像同样适用,设置 height: auto;
1 |
|
可变高度
高度必须定义,但可以是百分比或 max-height。不想定义高度的话,用 display: table
(需要考虑 Table-Cell 兼容性)。
1 |
|
负 margin
确切知道宽高,负 margin 是宽和高的一半。
1 |
|
Table-Cell
参考文章:Flexible height vertical centering with CSS, beyond IE7
结构:
1 |
|
样式:
1 |
|
FlexBox
参考文章:Designing CSS Layouts With Flexbox Is As Easy As Pie
1 |
|
参考资料:
* 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 居中大全(转)的更多相关文章
- CSS 居中大全【转】
我看最近微博流行 CSS 居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:“茴香豆的回字有四种写法”,万一哪天有个面试官问你:“居中一共有几种写法 ...
- CSS 居中大全(转)
转自这里,收藏备用. <center> 不建议用了. text-align:center 在父容器里水平居中 inline 文字,或 inline 元素 vertical-align:mi ...
- CSS 居中大全
<center> text-align:center 在父容器里水平居中 inline 文字,或 inline 元素 vertical-align:middle 垂直居中 inline 文 ...
- Web之CSS开发技巧: CSS 居中大全
<center> text-align:center 在父容器里水平居中 inline 文字,或 inline 元素 vertical-align:middle 垂直居中 inline 文 ...
- HTML CSS 属性大全
CSS 属性大全 文字属性 「字体族科」(font-family),设定时,需考虑浏览器中有无该字体. 「字体大小」(font-size),注意度量单位.<绝对大小>|<相对大小&g ...
- CSS样式大全(网络收集整理)
CSS样式大全(网络收集整理 字体属性:(font) 大小 {font-size: x-large;}(特大) xx-small;(极小) 一般中文用不到,只要用数值就可以,单位:PX.PD 样式 { ...
- CSS居中demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
- [转]CSS hack大全&详解
转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...
- css居中那点事儿
css居中那点事儿 在css中对元素进行水平居中是非常简单的,然而使元素垂直居中就不是一件简单的事情了,多年以来,垂直居中已经成为了CSS领域的圣杯,因为它是极其常见的需求,但是在实践中却不是一件简单 ...
随机推荐
- C# Azure 设置云端应用程序的默认时间
在微软云Azure中,应用程序(website)的默认时间是按照美国UTC的时间的. 例如,在应用程序中获取DateTime.Now,的时候,是获取UTC的时间,不是中国的时间. 所以我们开始在这里设 ...
- JavaScript学习总结(五)——jQuery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...
- 树莓派安装.net core 2.1
0.更新源 sudo apt-get update 1.安装依赖 sudo apt-get install curl libunwind8 gettext 2.下载 SDK 或者 RunTime ht ...
- [PHP] 看博客学习观察者模式
具体应用场景是,当subject的某个动作需要引发一系列不同对象的动作(比如你是一个班长要去通知班里的某些人),与其一个一个的手动调用触发的方法(私下里一个一个通知),不如维护一个列表(建一个群),这 ...
- JAVA-将内容写入文件并导出到压缩包
取出数据库表中的内容写入到文件,并将所有文件写入到压缩包最终导出到指定的某目录下 //导出的压缩包格式 xxxx_date Date currentTime = new ...
- 安装Mysql报错**此用户已存在!**
我是安装了两个installer下载器,将其中一个删除运行另一个就会报这个错. 解决办法:将删除的那个installer从回收站还原.
- JS实现选择菜单栏(配合慕课网淘宝搜索框的课程)
以下是关于实现慕课网淘宝搜索框的JS代码,不过只有选择菜单栏(其余比较容易实现). <!doctype html> <html> <head> <!--在IE ...
- 获取和添加URL地址栏参数
URL地址(添加参数:传参) js写法: //1.window.location.href var a ="1018802,8" var b ="1" wind ...
- jQuery操作table数据上移、下移和置顶
jQuery 操作table中的tr换行的步骤如下: 1.获取当前tr var $tr = $(this).parents("tr"); 2.移动tr //上移 $tr.prev( ...
- python学习笔记——python JSON
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于人阅读和编写. 1.JSON 函数 使用 JSON 函数需要导入 json 库:import json ...