CSS居中之美
关于居中,你会想到什么?
div{margin: auto;}
常见的居中方法
水平居中
.demo{
text-align: center; margin: auto; position: absolute;
left: 50%;
margin-left: -?px;
}
垂直居中
.demo{
height: 30px;
line-height: 30px; display: table-cell;
vertical-align: middle; position: absolute;
top: 50%;
margin-top: -?px;
}
还有其他方法吗?
CSS3
display:flex;
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
</head>
<body>
<div class="flex">
<div class="flex-item">flex item</div>
</div>
</body>
</html>
.flex{
display: -webit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
border: 1px solid;
height: 200px;
} .flex-item{
border: 1px solid blue;
height: 50px;
}
水平居中
P {alignment: center;}
垂直居中
P {child-align: middle;}
position方法
p{position:center;}
CSS理论基础
盒模型(box-sizing)
border-box/content-box/padding-box
定位体系
普通流(Normal flow)
块级格式化上下文(Block formatting contexts)
行内格式化上下文(Inline formatting contexts)
position: relative;
浮动(Floats)
绝对定位(Absolute positioning)
position: absolute;
position: fixed;
前端的本质工作是「还原设计」
而CSS是设计意图的最终实现
三层分离(内容,表现,行为)
优雅降级(Graceful Degradation),1994
渐进增强(Progressive Enhancement),2003
误区
滥用 float 布局
使用空标签闭合浮动
用 <br> 控制垂直间距
用 控制字间距(两端对齐布局等)
直接在标签上用 style 属性写样式
随意甚至使用拼音给 Class,ID 命名
多 Class 症(滥用 OOCSS)
CSS居中之美的更多相关文章
- css水平垂直居中的几个方法和技巧/居中之美
水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-ali ...
- CSS居中demo
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...
- css居中那点事儿
css居中那点事儿 在css中对元素进行水平居中是非常简单的,然而使元素垂直居中就不是一件简单的事情了,多年以来,垂直居中已经成为了CSS领域的圣杯,因为它是极其常见的需求,但是在实践中却不是一件简单 ...
- css居中学习笔记
css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...
- CSS居中完全解决方案
上次面试面试官问到了,问了个定宽局中和不定宽局中,下来我把所有有关CSS居中都总结了一下 原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 水平居中 行内元素 把行内元素 ...
- 理解CSS居中
我想很多在前端学习或者开发过程中,肯定会遇到如何让你的元素居中的问题,网上google肯定会有很多的解决方法.今天我就个人的项目与学习经验谈谈个人理解css如何让元素居中. 要理解css的居中,首先必 ...
- CSS 居中大全【转】
我看最近微博流行 CSS 居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:“茴香豆的回字有四种写法”,万一哪天有个面试官问你:“居中一共有几种写法 ...
- CSS居中的实现用法实例
转载的一篇文章,讲解css内容居中的. 网上有关css 居中的文章不胜枚举,不过大多没有做系统的总结.这里分享的这篇有关css居中的文章,个人感觉不错,值得收藏. 一.水平居中1,将元素水平居中(us ...
- 各种div+css居中方式调整(转载)
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码 目录(?) ...
随机推荐
- Traffic Steering for Service Function Chaining
Introduction 目前通过vlan标签来把流量引向对应的sfc 以前的sfc静态(SFs相邻组成SFC),有了sdn之后具有动态性.(SFs不需要彼此相邻.将流量动态地导向所需的SFs.) 流 ...
- 使用rand替换random模块
random模块使用相同的种子,在不同的进程中会出现相同的结果. rand的模块使用不同的种子,在不同的进程中不会出现相同的结果. 2个模块都是erlang自带的. 然后erlang在文档里面注明推荐 ...
- NFS 它的目的就是想让不同的机器、不同的作业系统可以彼此分享个别的档案啦
NFS即网络文件系统,是FreeBSD支持的文件系统中的一种,它允许网络中的计算机之间通过TCP/IP网络共享资源.在NFS的应用中,本地NFS的客户端应用可以透明地读写位于远端NFS服务器上的文件, ...
- oracle package pragma SERIALLY_REUSABLE(编译指示 告诉PL/SQL 的运行时引擎,在数据引用之时不要保持包级数据。)
当包第一次被动调用时,将进行初始化:比如将包从硬盘上调到内存中来,放到系统全局工作区的共享缓冲池中,包的运行状态则被放到用户全局区的会话中存储区中,因此可以保证每个调用包的会话都拥有包的运行副本,当会 ...
- 从理论到实践,全方位认识DNS
从理论到实践,全方位认识DNS 2015-11-23 程序员之家 作者:selfboot 原文:http://segmentfault.com/a/1190000003956853 对于 DNS(Do ...
- fsocket发送post实现异步请求
function triggerRequest($url, $post_data = array(), $cookie = array()){ //可以通过POST或者GET传递一些参数给要触发的脚本 ...
- web移动开发最佳实践之js篇
一.js概述 js即JavaScript,是被设计用来验证表单.检测浏览器.创建cookies.改进设计以及更多应用的网络脚本语言,它非常容易使用.在web应用中,它是主要的编程语言,主要用途是进行各 ...
- 我的系统资源呢?php-fpm你知道吗?
1:别的先不管咱们top一下.看看咱们的cpu ram swap的使用情况 由上图分析,可以看出共有602个进程,其中有601个进程休眠了.这好像有点不对劲,内核进程也就80个左右,加上memcach ...
- jumpserver的安装部署
废话不说直接安装 1:安装数据库 这里是提前安装,也可以不安装,在安装jumpserver主程序的时候,他会询问你是否安装 yum -y install ncurses-devel cmake ech ...
- 【计算机基础】当你在浏览器中输入Google.com并且按下回车之后发生了什么?
本文转载自:https://github.com/skyline75489/what-happens-when-zh_CN#id9 按下"g"键 接下来的内容介绍了物理键盘和系统中 ...