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

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

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

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. 题解 P3252 【[JLOI2012]树】

    \(\Huge{[JLOI2012]树}\) 题目描述 在这个问题中,给定一个值S和一棵树.在树的每个节点有一个正整数,问有多少条路径的节点总和达到S.路径中节点的深度必须是升序的.假设节点1是根节点 ...

  2. 【离散数学】SDUT OJ 指定长度路径数

    指定长度路径数 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Problem Description 题目给出一个有n个节点 ...

  3. 导出table为Excel

    1.HTML <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=" ...

  4. mtd-util

    1.1.4.1. mtd-util简介 mtd-util,即mtd的utilities,是mtd相关的很多工具的总称,包括常用的mtdinfo,flash_erase, flash_eraseall, ...

  5. javascript高级程序设计---js事件思维导图

    绘制思维软件与平时用的笔记,以及导出功能,这三个问题综合起来,于是我把思维导图分开画 1.js事件的基本概念 2.js事件的事件处理程序 3.js事件的事件对象

  6. SOAP XML报文解析

    import java.util.HashMap;import java.util.List;import java.util.Map; import org.dom4j.Document;impor ...

  7. CSS3 选择器 修改 整数个样式

    .blogbottom ul li:nth-child(4n){margin-right:0px;} 说明:4n就是每第4个.

  8. [BZOJ 5330][SDOI2018] 反回文串

    传送门 怎么说呢,一道不可多得的反演题吧,具体解释之后再补 #include <bits/stdc++.h> using namespace std; #define rep(i,a,b) ...

  9. SPOJ - MAXXOR

    依然是异或运算,这次是限制L,R范围内挑2个数使其异或值最大 如果r最高为是pos,那最理想状态当然是(1ll<<pos+1)-1 只有2个数如果凑近最理想的状态?直接找紧挨着的一个就好, ...

  10. python中各进制之间的转换

    偶然翻看进制转换的内容.这里简单做一个记录吧. #十进制转换二进制 >>> bin() '0b1010' #十进制转换十六进制 >>> hex() '0xa' #二 ...