水平居中有text-align:center 和 margin:0 auto,前者是针对父元素进行设置而后者则是对子元素。margin:0 auto; 这里实现的前提是子元素没有float 浮动起来,不然没有效果。

垂直居中 line-height ,将其值设为等于父元素的height值,内部的文字就会自动垂直居中,仅只能是文字。
 
这个问题经常在实践中碰到总结一下经验,基本上都是从别人文章中看到的一些好的解决方法。
 
1、给父元素添加 parent:after{ content:""; display:table; clear:both}
 
2、position 实现    { width:100px; height:80px; position:absolute; top:50%;left:50%; margin-left:50px;margin-top:40px}使用这个方法的好处在于无论你是什么形式的内容都可以马上居中,而缺点就是必须对元素有确定的宽高值,通过javascript来计算。
 
 
图片的垂直上下居中分布
   parent{ position:relative;}
 child{ position:absolute; top:0; left:0; right:0; bottom:0;width:200px; height:400px; margin:auto}
 
元素竖直居中方法:
   1、单行文本或图片的竖直居中 vertical-align:middle;
   2、显示模式改为table
   3、绝对定位+margin-top:负值
   4、拉伸子元素  再配合margin:auto,见图片垂直上下居中
   5、上下相等padding
 

css 居中问题的更多相关文章

  1. CSS居中demo

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

  2. css居中那点事儿

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

  3. css居中学习笔记

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

  4. CSS居中完全解决方案

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

  5. 理解CSS居中

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

  6. CSS 居中大全【转】

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

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

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

  8. 各种div+css居中方式调整(转载)

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

  9. CSS居中方法

    css居中方法非常多,根据工作的实际情况采用恰当方法,可取到事半功倍的效果. 就常见的一些居中方法整理如下: 代码如下: <div class="con"> <d ...

  10. css居中问题

    学习过程中遇到css居中问题 , 也查阅了资料,每个人的方法都不尽相同,而且当时看懂了,过后就记混淆了;so作为一个前端小白,也来写一下俗话说好脑子不如烂笔头,毕竟自己知道的也不多,其实是抱着学习和交 ...

随机推荐

  1. 在linux中减小和增大LV的过程与思考

    今天在安装oracle 11 rac的时候,查看操作系统df -lh,发现/home目录竟然分了500多G,/根目录才有50G,当时我就爆了句粗口,这TM系统是怎么做的. Filesystem     ...

  2. MVC前台页面做登录验证

    最近接触了一个电商平台的前台页面,需要做一个登录验证,具体情况是:当用户想要看自己的订单.积分等等信息,就需要用户登录之后才能查询,那么在MVC项目中我们应该怎么做这个前台的验证呢? 1.我在Cont ...

  3. Caffe初试(二)windows下的cafee训练和测试mnist数据集

    一.mnist数据集 mnist是一个手写数字数据库,由Google实验室的Corinna Cortes和纽约大学柯朗研究院的Yann LeCun等人建立,它有60000个训练样本集和10000个测试 ...

  4. 教你几种在SQLServer中删除重复数据方法(转)

    转载地址:http://www.jb51.net/article/22980.htm 方法一 复制代码 代码如下: declare @max integer,@id integer declare c ...

  5. Pyqt adb 获取Android手机屏幕

    adb的全称为Android Debug Bridge,就是起到调试桥的作用.adb的工作方式比较特殊,采用监听Socket TCP 5554等端口的方式让IDE和Qemu通讯,默认情况下adb会da ...

  6. linux日志文件

    linux日志文件 在系统运行正常的情况下学习了解这些不同的日志文件有助于你在遇到紧急情况时从容找出问题并加以解决. /var/log/messages — 包括整体系统信息,其中也包含系统启动期间的 ...

  7. error LNK2019 无法解析的外部符号 __imp__accept@12

    用VS2015编译CuraEngine,出现如下错误: PlatformSocket.obj   error LNK2019 无法解析的外部符号 __imp__accept@12 PlatformSo ...

  8. 使用Python解析JSON数据的基本方法

    这篇文章主要介绍了使用Python解析JSON数据的基本方法,是Python入门学习中的基础知识,需要的朋友可以参考下:     ----------------------------------- ...

  9. 通过TStringList保存csv文件,只要循环.Add表格里面的每行记录进去,保存即可

    dlgSave := TSaveDialog.Create(nil); dlgSave.filter := 'CSV文件|*.CSV'; dlgSave.DefaultExt := '*.CSV'; ...

  10. jface databinding:部分实现POJO对象的监测

    在前一篇博文<jface databinding/PojoBindable实现对POJO对象的支持  >中,已经知道直接对POJO对象进行修改,是不能被绑定的UI组件知道的,在上一篇文章中 ...