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居中代码 目录(?) ...
随机推荐
- Saver 保存与读取
tensorflow 框架下的Saver 功能,用以保存和读取运算数据 Saver 保存数据 代码 import tensorflow as tf # Save to file #remember t ...
- Android 8悬浮窗适配
背景 APP推出时,提示是退出还是更改账号,这个提示框是系统级别的.然而我的Android 9 会崩溃,宁外一个小伙伴Android 7运行理想.报错提示permission denied for w ...
- Thrift语法参考
1.Types Thrift类型系统包括预定义基本类型,用户自定义结构体,容器类型,异常和服务定义 (1) 基本类型 bool: 布尔类型,占一个字节 byte: 有符号字节 i16:16位有符号整型 ...
- (打补丁 )patch
前言: diff:逐行比较文件的不同,并且显示出来. patch: 打补丁工具,将补丁打到老文件里面,也就是diff左边的那个文件,使得老文件和新文件一样 格式:diff [选项] 老文件 新文件 格 ...
- WebService(一)
1.简介 Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML(标准通用标记语言下的一个子集)标准来描述.发布.发现.协调和配置这些应用程序,用 ...
- QtCharts模块在QtWideget中图表绘制(非QML)
版权声明:若无来源注明,Techie亮博客文章均为原创. 转载请以链接形式标明本文标题和地址: 本文标题:QtCharts模块在QtWideget中图表绘制(非QML) 本文地址:http:/ ...
- 【Leetcode】 328. Odd Even Linked List
Given a singly linked list, group all odd nodes together followed by the even nodes. Please note her ...
- POSt 提交参数 实体 和字符串
//1.后台接受是 字符串形式 [HttpPost] public int SendTaxiAudioByWX(string userid, string suid, string indexno, ...
- webgl学习笔记二-绘图多点
写在前面 建议先看下第一篇webgl学习笔记一-绘图单点 第一篇文章,介绍了如何用webgl绘图一个点.接下来本文介绍的是如何绘制多个点.形成一个面. webgl提供了一种很方便的机制,即缓冲区对象, ...
- CF464C-Substitutes in Number
题意 开始给出一个长为\(n\)的数字串,有\(m\)次操作按顺序执行,每次把当前数字串中的某一个数码替换成一个数字串\(t\)(可以为空或多位),最后问操作结束后的数字串十进制下模\(10^9+7\ ...