关于居中，你会想到什么？

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> 控制垂直间距
用 &nbsp; 控制字间距(两端对齐布局等)
直接在标签上用 style 属性写样式
随意甚至使用拼音给 Class，ID 命名
多 Class 症(滥用 OOCSS)

CSS居中之美的更多相关文章

  1. css水平垂直居中的几个方法和技巧/居中之美

    水平居中设置-行内元素     我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-ali ...

  2. CSS居中demo

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  3. css居中那点事儿

    css居中那点事儿 在css中对元素进行水平居中是非常简单的,然而使元素垂直居中就不是一件简单的事情了,多年以来,垂直居中已经成为了CSS领域的圣杯,因为它是极其常见的需求,但是在实践中却不是一件简单 ...

  4. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

  5. CSS居中完全解决方案

    上次面试面试官问到了,问了个定宽局中和不定宽局中,下来我把所有有关CSS居中都总结了一下 原文摘自我的前端博客,欢迎大家来访问 http://www.hacke2.cn 水平居中 行内元素 把行内元素 ...

  6. 理解CSS居中

    我想很多在前端学习或者开发过程中,肯定会遇到如何让你的元素居中的问题,网上google肯定会有很多的解决方法.今天我就个人的项目与学习经验谈谈个人理解css如何让元素居中. 要理解css的居中,首先必 ...

  7. CSS 居中大全【转】

    我看最近微博流行 CSS 居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:“茴香豆的回字有四种写法”,万一哪天有个面试官问你:“居中一共有几种写法 ...

  8. CSS居中的实现用法实例

    转载的一篇文章,讲解css内容居中的. 网上有关css 居中的文章不胜枚举,不过大多没有做系统的总结.这里分享的这篇有关css居中的文章,个人感觉不错,值得收藏. 一.水平居中1,将元素水平居中(us ...

  9. 各种div+css居中方式调整（转载）

    盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码   目录(?) ...

随机推荐

  1. 解释Spring中IOC, DI, AOP

    oc就是控制翻转或是依赖注入.通俗的讲就是如果在什么地方需要一个对象,你自己不用去通过new 生成你需要的对象,而是通过spring的bean工厂为你长生这样一个对象.aop就是面向切面的编程.比如说 ...

  2. 使用RStudio学习一个简单神经网络

    数据准备 1.收集数据 UC Irvine Machine Learning Repository-Concrete Compressive Strength Data Set 把下载到的Concre ...

  3. 重写JdbcRDD支持Sql命名参数和分区

    Spark提供的JdbcRDD很不好用,没法指定命名参数,而且必须要提供两个Long类型的参数表示分区的范围,如果数据表没有long类型的字段或者不需要条件,那就不能用JdbcRDD了.这里我简单重写 ...

  4. PAT 甲级 1027 Colors in Mars

    https://pintia.cn/problem-sets/994805342720868352/problems/994805470349344768 People in Mars represe ...

  5. CentOS系统iptables防火墙的启动、停止以及开启关闭端口的操作

    CentOS 配置防火墙操作实例(启.停.开.闭端口):注:防火墙的基本操作命令:查询防火墙状态:[root@localhost ~]# service   iptables status停止防火墙: ...

  6. 【vue】vue组件的自定义事件

    父组件: <template> <div> <my-child abcClick="sayHello"></my-child> &l ...

  7. 【转】MySQL数据表中记录不存在则插入，存在则更新

    mysql 记录不存在时插入在 MySQL 中,插入(insert)一条记录很简单,但是一些特殊应用,在插入记录前,需要检查这条记录是否已经存在,只有当记录不存在时才执行插入操作,本文介绍的就是这个问 ...

  8. 【ABP】Abp的AspNetZero5.0版本无法使用ctrl+f5调式

    原文:http://www.cnblogs.com/94pm/p/7942483.html AspNetZero是基于Abp框架开发的商业程序,最近从Abp交流群中得知5.0版本开始加入了防盗版的功能 ...

  9. 最大流算法-ISAP

    引入 最大流算法分为两类,一种是增广路算法,一种是预留推进算法.增广路算法包括时间复杂度\(O(nm^2)\)的EK算法,上界为\(O(n^2m)\)的Dinic算法,以及一些其他的算法.EK算法直接 ...

  10. Codeforces 748D Santa Claus and a Palindrome

    雅礼集训期间我好像考完试就开始划水了啊 给出k个长度相同的字符串,每个串有一个权值,选出一些串连成一个回文串.使得选中的串的总权值最大. 如果选一个串,必须同时选一个对称的串.还有一个特殊情况是可以在 ...