居中在前端布局上很常见,也很常用,也是最基本的技巧。居中效果在方向控制上基本可以分解成水平居中,垂直居中和水平垂直居中。

  针对调整的元素不同,具体的处理方式上有些差异。这里我们先不讲绝对定位下的居中,绝对定位下的居中方法很多,变化也多。下面讲的都是非绝对定位下的方法,原则上有两个,一个是常用,另外一个是兼容性最好。

水平居中是居中效果中最常见的,最常用的方法莫过于下列两种:

HTML:

<div class="box">薛定谔的喵!</div>

1、text-align center

.box {
  text-align: center;
}

2、定宽元素 margin: 0 auto;

.box {
width: 96px;
margin: 0 auto;
}

结果自然不言而喻,都是居中的,

如果是对于文本的水平居中更倾向于第一点,因为在第二点上压根就不好计算文本的宽度,即使计算会有小许的误差,虽然对文字兼容性上不是很好,却很适合于按钮或者是宽度固定的块状元素,

反过来需要说明的是第一点也不单单是对文字有效,而是对内联(inline-XX)元素都有效,这个我们可以看

css3总结之居中的更多相关文章

  1. css3 position fixed居中的问题

    通常,我们要让某元素居中,会这样做: #element{ margin:0 auto; } 假设还想让此元素位置固定呢?一般我们会加入position:fixed,例如以下: #element{ po ...

  2. CSS3 垂直居中 左右居中

    display: -webkit-box; -webkit-box-orient: horizontal; -webkit-box-pack: center; -webkit-box-align: c ...

  3. CSS3/CSS之居中解析(水平+垂直居中、水平居中,垂直居中)

    首先,我们来看下垂直居中: (1).如果是单行文本,则可以设置的line-height的数值,让其等于父级元素的高度! <!DOCTYPE html> <html lang=&quo ...

  4. CSS3实现图片黑白滤镜居中,hover缩放遮罩的效果

       hover: 在前端开发中经常会遇到项目展示,往往会采用卡片方式来描述.众多网站中,普遍采用CSS3的scale()方法来实现交互. 本文即是利用纯CSS实现图片居中缩放,此类方法各大网站均有应 ...

  5. 常用的CSS居中方式

    1.水平居中margin 0 auto;(浮动元素除外) 这个属性在网页制作的过程中是经常被用到的,一般情况下页面的版心你就可以看到它. <style> .father { width: ...

  6. css水平居中总结

    前言 看了好多篇帖子,发现没有一个能够直接让新手很快上手使用水平居中布局的,所以在此进行一番总结,也算是我对水平居中布局的一点点积累沉淀,同时也方便初学者们拿来即用. 一.元素分类 1.行内元素 行内 ...

  7. 垂直居中Demo

    换行文字垂直居中1 换行文字垂直居中,兼容所有浏览器 换行文字垂直居中2 换行文字垂直居中,兼容所有浏览器 固定宽高图片垂直居中1 固定宽高图片垂直居中2 图片自适应容器宽高垂直居中 CSS3垂直居中 ...

  8. CSS注

    1.css3内容上下左右居中 .box { display:-moz-box; -moz-box-pack:center; -moz-box-align:center; display:-webkit ...

  9. css3种方法实现元素的绝对居中

    元素的绝对居中应该是很多人熟悉的一个小应用,我记得很多年前去神州数码面试的时候就遇到过这个面试题.方法比较简单,代码如下: .node{ width : 300px; height : 400px; ...

随机推荐

  1. 我的csdn博客地址

    呆雁 持续的谦虚与努力 http://blog.csdn.net/u013539183

  2. bit、Byte、bps、Bps、pps、Gbps的单位的说明及换算

    一.bit与Byte区别 1. bit(比特) 是电脑记忆体的最小单元,在二进制计算机中,每一比特代表0或1的数位信号. 2. Byte(单位字节) 一般表示存储介质大小的单位,数字.字母和特殊符号占 ...

  3. gym 102082G BZOJ4240 贪心+树状数组

    4240: 有趣的家庭菜园 Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 756  Solved: 349[Submit][Status][Discu ...

  4. springcloud微服务总结六

    SpringCloud实战7-Config分布式配置管理 分布式环境下的统一配置框架,已经有不少了,比如百度的disconf,阿里的diamand 官方文档对spring Cloud Config的描 ...

  5. 瀑布模型,(增量开发)渐增式开发,原型化开发,统一过程模型(RUP)

    瀑布模型:设计在开发阶段 瀑布模型有以下优点 1)为项目提供了按阶段划分的检查点. 2)当前一阶段完成后,您只需要去关注后续阶段. 3)可在迭代模型中应用瀑布模型. 增量迭代应用于瀑布模型.迭代1解决 ...

  6. 清华集训2017D2T1 小 Y 和地铁(metro)

    题目:https://www.luogu.org/problem/show?pid=P4005 题意:一条线段,给定n个点(n<=44)其中每个点可能对应另外一个点.如果一个点有对应点,那么就要 ...

  7. LeetCode268.缺失数字

    268.缺失数字 描述 给定一个包含 0, 1, 2, ..., n 中 n 个数的序列,找出 0 .. n 中没有出现在序列中的那个数. 示例 示例 1: 输入: [3,0,1] 输出: 2 示例 ...

  8. POJ1064 Cable master 【二分找最大值】

    题目:题目太长了! https://vjudge.net/problem/POJ-1064 题意分析:给了你N根长度为小数形式的棍子,再给出了你需要分的棍子的数量K,但要求你这K根棍子的长度必须是一样 ...

  9. codeforces1097D Makoto and a Blackboard 数学+期望dp

    题目传送门 题目大意: 给出一个n和k,每次操作可以把n等概率的变成自己的某一个因数,(6可以变成1,2,3,6,并且概率相等),问经过k次操作后,期望是多少? 思路:数学和期望dp  好题好题!! ...

  10. 什么是javascript的中间件?

    第一次写博客,有点想在博客园试水的感觉,也分享下觉得有用的东西(源码自己写的) 什么是javascript中间件呢?函数middle就是用来构建中间件的,我用例子说明下 下面我定义了一个函数use,在 ...