原文链接:http://caibaojian.com/370.html

水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell,mg12的博客那个相关文章的列表好像就是使用这个代码来的,之前我也是参考他来的。今天重新整理一下,并结合前人的辛劳,总结一下以作备份。

水平居中,如果知道元素的宽度,则可以使用

.cell{width:300px; margin:0 auto; text-align:center;}

如果是内联元素居中,那么直接用text-align:center

如果未知元素宽度,并且非内联元素,那么下面给出的几种方案也适合你。

第一种:相对定位法

原理是父类浮动的同时向左left:50%,而子类则向左浮动的同时left:50%;

<style type="text/css">
.centerlist {position:relative;left:50%;float:left;}
.centerlist li {position:relative;right:50%; z-index:2;float:left}
</style>
<ul class="centerlist">
<li><a href="#">Lorem ipsum dolor.</a></li>
<li><a href="#">Lorem ipsum dolor.</a></li>
<li><a href="#">Lorem ipsum dolor.</a></li>
<li><a href="#">Lorem ipsum dolor.</a></li>
<li><a href="#">Lorem ipsum dolor.</a></li>
<li><a href="#">Lorem ipsum dolor.</a></li>
<li><a href="#">Lorem ipsum dolor.</a></li>
<li><a href="#">Lorem ipsum dolor.</a></li>
<li><a href="#">Lorem ipsum dolor.</a></li>
</ul>

第二种:强制内联

<style type="text/css">
.centerlist_inline{text-align: center;}
.centerlist_inline li{display: inline;}
</style>
<ul class="centerlist_inline">
<li><a href="">lorem1</a></li>
<li><a href="">lorem1</a></li>
<li><a href="">lorem1</a></li>
<li><a href="">lorem1</a></li>
</ul>

局限:块级元素改为内联元素,那么高度、宽度、margin-top,margin-bottom, padding-top,padding-bottom,等都不能用。

第三种: 使用inline-block

如果看过博主之前写的inline-block替换float可能会更清楚这个属性的好处。

<style type="text/css">
.centerlist_inline-block{text-align: center; font-size:0; -letter-spacing:-1px;}
.centerlist_inline-block li{display: inline-block; *display: inline; *zoom:1; font-size:12px; letter-spacing:normal; word-spacing:normal;}
</style>
<ul>
<li><a href="">lorem1</a></li>
<li><a href="">lorem1</a></li>
<li><a href="">lorem1</a></li>
<li><a href="">lorem1</a></li>
</ul>

第四种:table-cell

<style type="text/css">
.centerlist_table-cell{display:table; margin:0 auto;}
.centerlist_table-cell{display:table-cell;}
</style>
<ul class="centerlist_table-cell">
<li><a href="">lorem1</a></li>
<li><a href="">lorem1</a></li>
<li><a href="">lorem1</a></li>
<li><a href="">lorem1</a></li>
</ul>

缺点是不兼容ie6,ie7

推荐使用inline-block这种水平居中的方法,既保留了块级元素特性,而且完美兼容。就是代码有点多。另外你还可以使用表格的方式来水平居中。

说完了水平居中,下面说垂直居中。

如果元素是内联元素,并且只有一行,则我们可以通过line-height来设置与其高度同样大小,则实现了垂直居中了。

如果未知元素高度,那就要用下面方法了!

原文链接:http://caibaojian.com/css-vertical-middle.html

html代码:

<div class="middle-box">
<div class="middle-inner">
<p><span class="suc-tip">前端开发博客,专注前端开发和web教程</span><br/><span class="suc-link">快捷入口:<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>
<p style="display:none;"><span class="suc-tip">5年的老博客,一直致力于WEB开发</span></p>
</div>
</div>

第一种:display:table的方法

.middle-box{display: table; height: 300px;}
.middle-inner{display: table-cell; vertical-align:middle; text-align:center;}
/*
缺点:不兼容ie6、ie7.
*/

怎么兼容呢?当然是用另外一种相对定位和绝对定位的方式。

<!--[if lt IE 8]>
<style>
.middle-inner { position: absolute; top:50%;}
.middle-inner p {position: relative; top: -50%}
</style>
<![endif]-->

可以使用IE的特有的条件语法,不过我习惯用ie hack来写。下面这个的代码实现了水平垂直多行代码(支持一行)居中对齐。目前测试IE、chrome和Firefox均兼容。代码如下:

.middle-box{display: table; height: 300px; border:1px solid #ff0000; width:400px; margin:0 auto; position:relative;}
.middle-inner{display: table-cell; vertical-align:middle; *position:absolute; *top:50%; *left:50%; width:100%; text-align:center;}
.middle-inner p{position:relative; *top:-50%; *left:-50%;}

遇到居中问题,这三句CSS就够用了。

第二种方法:增加一个空白标签

HTML代码:

<div class="middle-box">
<p><span class="suc-tip">前端开发博客,专注前端开发和web教程</span><br/><span class="suc-link">快捷入口:<a href="http://caibaojian.com">http://caibaojian.com</a></span></p>
<i class="visible"></i>
<p style="display:none;"><span class="suc-tip">5年的老博客,一直致力于WEB开发</span></p>
</div>

CSS代码:

.middle-box{height:300px; border: 1px solid #f00; width: 400px; margin: 0 auto; text-align: center; }
.middle-box p{vertical-align: middle; display: inline-block; *display: inline; *zoom:;}
.visible{height: 100%; vertical-align: middle; width:; display: inline-block;}

CSS水平垂直居中的方法的更多相关文章

  1. 介绍一种css水平垂直居中的方法(非常好用!)

    这次介绍一下一个水平垂直居中的css方法,这个方法可以说是百试百灵,废话不多说,直接附上代码: html,body{ width:100%; height:100%; } 你需要居中的元素{ posi ...

  2. css水平垂直居中的方法与 vertical-align 的用法

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 1. 已知元素宽度 方法一:已知宽高,可以用position定位 + margin负值的方法 : 绝对定位 ...

  3. css 水平垂直居中的方法总结

    在项目中经常会遇到设置元素水平垂直居中的需求.而且具体的场景也不同,所以将个人总结的方法做个汇总,希望对浏览者有用. 以下所举的例子都以一个html为准,这里规定好一些公用样式. body { bac ...

  4. CSS水平垂直居中常见方法总结

    1.元素水平居中 当然最好使的是: margin: 0 auto; 居中不好使的原因: 1.元素没有设置宽度,没有宽度怎么居中嘛! 2.设置了宽度依然不好使,你设置的是行内元素吧,行内元素和块元素的区 ...

  5. CSS水平垂直居中常见方法总结2

    1.文本水平居中line-height,text-align:center(文字)元素水平居中 margin:0 auo 方案1:position 元素已知宽度 父元素设置为:position: re ...

  6. [css]水平垂直居中的方法

    1.top:cale(50% - 2rem); left:cale(50% - 2rem);

  7. 53.CSS---CSS水平垂直居中常见方法总结

    CSS水平垂直居中常见方法总结 1.元素水平居中 当然最好使的是: margin: 0 auto; 居中不好使的原因: 1.元素没有设置宽度,没有宽度怎么居中嘛! 2.设置了宽度依然不好使,你设置的是 ...

  8. CSS水平垂直居中总结

    行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...

  9. CSS水平垂直居中的几种方法2

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

随机推荐

  1. monkey命令

    介绍: monkey是一个命令行工具,可以运行在Android模拟器里或真实设备中.它可以向系统发送伪随机(pseudo-random)的用户事件流(如按键输入.触摸屏输入.手势输入等),可以对待测的 ...

  2. 浅谈iOS开发中方法延迟执行的几种方式

    Method1. performSelector方法 Method2. NSTimer定时器 Method3. NSThread线程的sleep Method4. GCD 公用延迟执行方法 - (vo ...

  3. mysql slow query---pt-query-digest----db structure consistency,monitor table records before and after transaction.

    将数据库脚本纳入版本管理是很必要的,尤其对于需要在客户那里部署升级的系统. 对于Python Django等框架,由于数据库是通过Model生成的,因此框架本身包括数据库升级工具,并通过代码版本间接管 ...

  4. QQ战场形势图

    真是没什么可说,全面开战,无坚不摧,活脱脱一个中央帝国.只有极少的方向处于守势.本来对腾讯也没什么特别的感觉,但是看了这张图,真是让人热血沸腾. 如果美国的公司能像腾讯做的这么大相当于:faceboo ...

  5. 通过版本号实现乐观锁(MVCC)

    乐观锁大多是基于数据版本记录的机制实现 , 如 , 为每一行数据增加一个整型版本标识(version) , 每次数据更新都把版本号+1 工作原理:读取出数据时,将此版本号一同读出,之后更新时,对此版本 ...

  6. Inventory Costing in AX 2009

    I wanted to explore some scenarios that illustrate a few important concepts related to inventory cos ...

  7. 获取ip ,百度地图坐标点 和 在 后台调用 url()

        protected  void getip()         {             string ips = HttpContext.Current.Request.UserHostA ...

  8. oracle数据库连接慢的问题

    1.现象 工程为spring+mybatis+xfire,webservice工程服务,实现的接口数据功能 2.修复方法 经过各种尝试: 1.重新部署工程     无果 2.重新部署tomcat   ...

  9. 移动端的传统click事件延迟和点透现象

    一.场景描述: 1.A/B两个层上下z轴重叠. 2.上层的A点击后消失或移开.(这一点很重要) 3.B元素本身有默认click事件(如a标签) 或 B绑定了click事件. 在以上情况下,点击A/B重 ...

  10. JS调用中文乱码怎么办

    网络上有很多的实用的小插件,这些小插件可以直接拿过来实用即可,但是在使用的时候会出现很多的问题,就比如与说今天要讲的乱码中文乱码的问题,这个主要是因为我们调用的js和我们写的程序使用的编码不同,那么如 ...