在开发前端页面的时候,元素的居中是一个永远都绕不开的问题。看似简单的居中二字,其实蕴含着许许多多的情况,对应着很多的处理方法,本文就试图对页面布局中的居中问题进行总结~~

居中问题分为水平居中和竖直居中两种;而根据所居中元素的不同,有内联元素居中和块级元素居中两种居中问题。下面开始分类整理:

一、内联元素的居中

1、内联元素的水平居中:在父元素上设置text-align:center;

(为了节省空间、突出重点,每个选择器中无关紧要的样式我都会全部写在第一行,从第二行开始是关键样式~ 下同)

2、单行内联元素的竖直居中:设置内联元素的行高等于容器的高度

3、多行内联元素的竖直居中:用具有块级属性的容器包裹起来,然后应用下方块级元素的相关方法。

二、块级元素的居中

1、块级元素的水平居中:设置居中元素的margin属性: margin: 0 auto;

2、高度固定的块级元素的竖直居中:相对于父元素进行绝对定位,设置top:50%;并设置margin属性为自身高度一半的负值:

原理:设置了top:50%;之后,该元素的上边沿正好在父元素的中心上,此时让这个元素向上方移动自身高度的一半,就可以使这个元素的中心与父元素的中心重合,达到竖直居中的效果。此原理也可应用至水平居中的应用上。

3、高度可变的块级元素的竖直居中:利用display:table-cell,利用表格中的竖直居中来实现。(此方法不兼容IE7及以下版本的浏览器)

4、容器高度不固定元素的竖直居中: 手动设置内部元素的上下边距相等

三、块级内联元素的居中

1、水平居中: 方法等同内联元素的水平居中方法

2、竖直居中: 方法等同块级元素的竖直居中方法

四、各种不寻常的居中方法

上面所述的都是面对那些分类情况中第一时间应当想到的寻常方法,在居中问题中还有很多原理不寻常的方法,下面尝试进行总结(有的方法上面已经有所应用)

1、利用display:table-cell进行布局:

我们都知道,表格中提供了非常方便的居中属性,在DIV+CSS布局还未到来的时代,居中对于前端人员来说(那时似乎也没有前端这个职位23333)并不是个问题。但是在web的新时代中,再使用table进行大布局就显得有些XXXX了。还好新版的CSS为我们提供了display:table-cell的选项,使得一个普通的div也可以表现的像一个表格单元格,从而可以通过直接设置text-align:center; vertival-align:middle;通杀一切居中的效果(块级元素水平居中需在块级元素上加margin:
0 auto;)。 这使得table-cell成为了新一个布局神器,然而因为兼容性问题,所以这个方法似乎还没有太大规模的使用。

2、使用绝对定位+负边距的方法:

这种方法的原理在前面“高度固定的块级元素的竖直居中”部分已经有介绍。在水平居中中同样可以使用,将相应属性换成水平方向的对应属性即可。这种方法的缺点在于,需要预先知道居中元素的宽高,不适用于宽高可变的元素。

3、使用绝对定位+transform的方法:

这种方法是对上方负边距方法的一个改进。一般来说,CSS中距离单位使用百分比时,都是根据父元素的宽高来计算的。而transform:translate()方法在使用百分比单位时,是以自身的宽高进行计算的,这就弥补了负边距方法中“必须预先获知元素宽高”这一缺陷了。

当然,缺陷也很明显:translate是CSS3中的内容,并不兼容IE6、7、8。(手动冷漠脸)

4、使用绝对定位+auto边距的方法:

使居中元素相对于其父元素绝对定位,设置居中方向上的偏移值为0(两方向都要设置),然后设置居中方向上的margin值为auto(同样两个方向都要设置),即可实现居中。下图为水平竖直居中的例子。

这种方法有两个负作用:1、居中元素的盒模型中margin部分会填充整个父容器,可能会影响同等级其他元素的布局。

2、不能用于高度可变元素。例如对一个高度可变的内容容器使用本方法,其高度会自动拉伸至100%,失去高度随内容自适应的性质。

5、浮动元素的水平居中

对于一群浮动元素的居中,可以使用以下办法:精确计算浮动元素的总宽度及边距,设置一个宽度等与此值的块级容器,使得浮动元素在此容器内浮动,而此容器相对原先的父容器水平居中。

对于单个浮动元素的居中。。。。。。就剩一个元素了还浮动个毛线!

6、一种非常奇怪的方法。。。使用font-size实现竖直居中

居然还能用这个??????

这种方法仅仅在IE6和IE7中有效,可以看作对table-cell方法的补充。在高度固定的父元素中,设置font-size的值为高度除以1.14得到的值(手动十个尼克杨问号脸),子元素为内联或块级内联元素并设置vertical-align:middle,可以实现竖直居中。

下面是这个方法与table-cell方法的结合,使用了css hack,可以兼容所有浏览器。

7、引入新的不可见元素实现居中

这种方法的原理和上面提到的绝对定位系列方法是类似的。对于单个高度(宽度)固定的元素,可以在同级添加一个div,设置其高度为50%,并设置下边距为居中元素高度一半的负值(这里替换成上面给居中元素设置的负边距或者translate都可以),即可完成居中效果:

当然,这里面的#another也可以通过伪元素实现:

需要注意的是,使用此方法实现水平居中时,需要给两个子div和伪元素设置display:inline-block样式,否则块级元素自带的换行效果会使得这种方法失效。

来做一个小的总结吧。在页面布局的时候,使用CSS进行居中操作,根据情况的不同,有着各种各样不同的方法。而这些各种各样的方法,也都有着各种各样的优劣,有的需要提前确定元素的宽高,有的存在兼容性问题。这就需要我们在开发的过程中,根据实际情况灵活选用方法,并加以自己的修改,方可实现各种居中~~上面这些方法已经足够应对大部分场景,如果遇到了更加奇妙的方法,我也会更新这篇博文与大家分享的~

CSS中各种各样居中方法的总结的更多相关文章

  1. CSS中各种居中方法

    CSS中各种居中方法,本文回顾一下,便于后续的使用. 水平居中方法 1.行内元素居中 行内元素居中是只针对行内元素的,比如文本(text).图片(img).按钮等行内元素,可通过给父元素设置 text ...

  2. css中关于居中的那点事儿

    css中关于居中的那点事儿 关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...

  3. css中各种居中的奇技淫巧总结

    css中各种居中的奇技淫巧总结   第一种,在固定布局中比较常用的技巧设置container的margin:0 auto:   第二种(从布局中入手)   css .outer{ height:200 ...

  4. CSS中垂直居中的方法

    昨天总结了css中水平居中的方法,今天来总结一下css中实现垂直居中的方法. line-height line-height用于实现单行文本的垂直居中,如下图中,我们要求单行文本垂直居中,只需要将di ...

  5. css中的居中问题

    前两天写了一篇关于display:table的用法,里面涉及到居中的问题,这两天愈发觉得css中的居中是一个值得关注的问题,现总结如下. 一.垂直居中 (1)inline或者inline-*元素 1. ...

  6. css中关于居中的问题

    居中是最常用的一种css格式,不同的居中方法适和不同的环境中,下面总结了几种常用的居中方法,你可以不用它,但是无论你是一个资深前端大牛,还是小小初学者,当你见到它的时候不认识它就是你的不对啦!!! h ...

  7. CSS中水平居中的方法

    居中是我们在css中经常遇到的问题,一般有水平居中.垂直居中.垂直水平居中这3种情况,那么今天首先就来对学习到的水平居中的方法做个总结笔记. css水平居中 text-align:center 它的效 ...

  8. css中的居中的方法

    一.垂直居中 (1)inline或者inline-*元素 1. 单行文字 设置上下padding相等 以前一直以为inline元素是没有上下的padding和margin的,其实不然,他们是有上下的p ...

  9. CSS中各种居中的问题

    1.元素水平居中 1.1 在父元素上使用text-align: center; father { text-align: center; } 1.2 margin: 0 auto; 在上一个问题中,我 ...

随机推荐

  1. 移动端浏览器body的overflow:hidden并没有什么作用

    今天突然遇到一个问题,使用li模拟select,但是碰到一个很尴尬的问题,给body加了overflow:hidden,但是body并没有禁止滚动条,滚动条依旧顺滑. <!DOCTYPE htm ...

  2. JavaScript中的 offset, client,scroll

    在js 中我们要用到的 offset, client, scroll 在这我把自己理解的给大家分享一下. offset div.offsetTop 指div距离上方或上层控件的距离,单位像素 div. ...

  3. 剑指Offer 数组中只出现一次的数字

    题目描述 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字.   思路: 因为有2个数字只出现了一次,而其他的数字都是2次,可以通过异或运算,得到最后这2个只 ...

  4. linux下编译gcc6.2.0

    linux下编译gcc6.2.0 在archlinx的下gcc已经更新到6.2.1了,win10的WSL下还是gcc4.8.官方源没有比较新的版本,于是自己编译使用. GCC6的几个新特性 GCC 6 ...

  5. 51. 顺时针打印矩阵[print matrix in clockwise direction]

    [本文链接] http://www.cnblogs.com/hellogiser/p/print-matrix-in-clockwise-direction.html [题目] 输入一个矩阵,按照从外 ...

  6. SB Admin 2 学习笔记1

    需要掌握能够搭建起一个 dashboard 的能力, 因为很少有运维开发团队有专职的前端, bootstrap 也要讲个基本法. SB Admin 2, 一个免费的 bootstrap theme, ...

  7. maven学习(上)- 基本入门用法

    一.下载及安装 1.1 下载maven 3.1.1 先到官网http://maven.apache.org/download.cgi 下载最新版本(目前是3.1.1 ),下载完成后,解压到某个目录(本 ...

  8. WebServices复习

  9. 使用Slf4j集成Log4j2构建项目日志系统的完美解决方案

    一.背景 最近因为公司项目性能需要,我们考虑把以前基于的log4j的日志系统重构成基于Slf4j和log4j2的日志系统,因为,使用slf4j可以很好的保证我们的日志系统具有良好的兼容性,兼容当前常见 ...

  10. 【笔记】ztree的使用

    引用的js和css: <!-- zTreeJS --><script type="text/javascript" src="jquery/jquery ...