居中“魔法”总结
作为一个前端程序员,各种居中的需求会经常遇到,比如说文本居中,水平居中,垂直居中,浮动元素居中等等。掌握一些居中的常用方法也是作为前端攻城师必不可少的技能。 因此总结了几种关于居中的实现方法,可能不是很全面,希望大家共勉,我们只需要掌握自己喜欢的几种便捷的方式,在之后开发的过程中,可以大大提高工作的效率。
该文章不涉及复杂的布局,只是单纯简洁的举例说明居中的问题,具体在项目过程中选择哪种方法主要还要根据实际情况(比如浏览器兼容性,移动端还是PC端等),若有问题欢迎指正,文章围绕以下的布局实现:
HTML部分:
<div class="contain"> <div class="center">居中部分</div></div>
1:已知居中的元素高度,可以支持图片居中
.contain{ height:100px; width: 200px; background-color:red; position:relative;}.center{ height: 20px; text-align:center; overflow:auto; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; vertical-align:middle;}
总结:以上方法比较常用,称为绝对居中;适合对要居中的对象设置高度的情况下,未设置高度时候是失效的;
- 可以完美支持图片居中;
- 支持跨浏览器,包括IE8-IE10;
- 支持高度,宽度百分比%属性值和min-/max-属性;
- 如果没有使用box-sizing属性时,是否设置padding都可实现居中;
2:负外边距
.center { width: 300px; height: 200px; text-align: center; position: absolute; top: 50%; left: 50%; margin-left: -150px; margin-top: -100px;
background-color: lightblue;}
总结:该方法用于块元素尺寸已知的情况下,比较流行;主要是外边距margin取负数,大小为width/height(不使用box-sizing: border-box时包括padding)的一半,再加上top: 50%; left: 50%;)如果设置了padding值,则margin-left= (width + padding)/2 ,margin-top=(height + padding)/2 ; IE兼容性好, 但是不能自适应并且不支持百分比尺寸和min-/max-属性设置。
以下均为可变高度的方法:
3:table,table-cell
.contain { display:table; height:200px; width:200px; background-color:red;}.center { display:table-cell; vertical-align:middle; text-align:center;}
总结:该方法是比较原始的方法,内容块高度会随着实际内容的高度变化,浏览器兼容性也较好;
4:行内块元素 inline-block
.contain{ margin: 200px 100px; position:relative; height:150px; width:200px; background-color:lightgreen; text-align:center;} .center{ display:inline-block; vertical-align:middle;}
.contain:after{ content: ''; display:inline-block; height: 100%; vertical-align:middle; background-color:lightgreen; }
总结:该方法比较复杂,代码量比较多,兼容性较好。关键在于边上设置高100%,宽度为0的伪元素,也可以用一个宽度为0 的行内块元素代替伪元素
5:transform
.contain{ position:relative; height:200px; width:200px; background-color:lightgreen; } .center { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
总结:是我比较喜欢的方法,代码量较少,也容易理解,但是不兼容IE8;
6:flex
.contain { display:flex; height:200px; width:200px; background-color:red; justify-content: center; align-items: center;}
总结:该方法也比较流行,是CSS3的新属性,代码易于理解,若用于PC开发的话,它不兼容IE8/IE9,不推荐,移动端用的较多
- Golang语言 xml解析实例
- 机器学习算法实现解析——libFM之libFM的模型处理部分
- Go语言使用protobuf数据通信--师出同门,懂的人理解吧
- 虚拟化平台cloudstack(6)——使用maven:jetty调试
- 虚拟化平台cloudstack(7)——新版本的调试
- 一行代码,Pandas秒变分布式,快速处理TB级数据
- 机器学习算法实现解析——word2vec源码解析
- 从零开始创建一个基于Go语言的web service
- 转--Golang项目邮件发送模块代码分享
- 虚拟化平台cloudstack(8)——从UI开始
- 使用oracle的大数据工具ODCH访问HDFS数据文件
- UWP基础教程 - XAML开篇
- UWP基础教程 - XAML依赖属性和附加属性
- GO语言学习:动态Web
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- (创建模式 上)设计模式——工厂、抽象工厂 C++/Python3实现
- 【新手宝典】一篇博文带萌新建站并了解建站体系流程和对萌新友好的便捷方式,这篇博文很有可能是你的启蒙文
- 一种不需要敲代码的Python 画图方法
- 【一】Windows API 零门槛编程指南——MessageBox 基本使用及基础讲解
- 【二】Windows API 零门槛编程指南——CreateWindow 窗口创建 “万字长篇专业术语全解”
- 「零门槛多语言 Python/C/C# 通用思想学习系列」第一篇:经典HelloWorld
- 直播系统定制,判断数据连接是否可用
- VS Code 编辑器入门指南上篇-核心概念与组件
- Python turtle库实现基本剖析
- python thinker canvas create_arc 使用详解
- Python3 实现单例设计模式
- Python3 实现建造者模式
- python 实现原型设计模式
- python 最简单的实现适配器设计模式
- python3 最基本且简单的实现组合设计模式