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领域的圣杯,因为它是极其常见的需求,但是在实践中却不是一件简单 ...
随机推荐
- Extjs 项目中常用的小技巧,也许你用得着(4)---Extjs 中的cookie设置
1.ExtJs设置cookie两种方式 其一:设置cookie如下 saveacct=isForm.getForm().findField('itemselector').getValue(); Ex ...
- $.ajax()参数详解及标准写法(转)
1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如 ...
- TCP/IP 基础简介
引言本篇属于TCP/IP协议的基础知识,重点介绍了TCP/IP协议簇的内容.作用以及TCP.UDP.IP三种常见网络协议相关的基础知识. 内容TCP/IP协议簇是由OSI七层模型发展而来的,之所以存在 ...
- POJ2955(KB22-C 区间DP)
Brackets Time Limit: 1000MSMemory Limit: 65536K Total Submissions: 7823Accepted: 4151 Description We ...
- [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[ ...
- 从零开始学习html(十三) CSS代码缩写,占用更少的带宽
一.盒模型代码简写 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type&quo ...
- jquery判断浏览器的内核
<script type='text/javascript'> $(function(){ if($.browser.msie) { alert("IE浏览器"); } ...
- Navicat Premium 12连接Oracle时提示oracle library is not loaded的问题解决
Navicat Premium 12连接Oracle时提示oracle library is not loaded的问题解决 链接时遇到的问题,记录一下 如果还没有安装工具,请参考:Navicat P ...
- 第一篇 Windows docker 概述
本人行业属于智能制造,偏向工厂应用,客户端程序全部是.Net 的 WinForm:本系统的后台是.Net,多系统交互的有java的:因系统发布效率问题,想采用docker Windows 的生产力环境 ...
- alpha阶段 代码结构及技术难点简介
我们的产品是安卓端app,所以目前主要就是用Android Studio来进行代码开发. Android Studio的项目的结构还是比较清晰的,如下图,主要就是java文件夹内的代码部分(.java ...