水平居中:

通过设置父元素,让子元素内容居中:text-align:center;

通过设置子元素本身,让子元素居中:margin:0 auto;

以上方法生效的前提条件是子元素没有被float元素影响。

垂直居中:

一种方法是通过line-height属性,但是line-height是作用在父元素上,当子元素的line-height值与父元素的height值一致时,文字就垂直居中了。

还有一种方法是通过position属性,这种方法可以说是万能的

父元素加上:position:relative;

子元素使用:position:absolute;(防止子元素飘到外太空去);

     width:xxxpx;

    height:xxxpx;

top:50%;

left:50%;

margin-top:-height/2(height值除以2的负值)

margin-left:-width/2(width值除以2的负值)

缺点就是必须对元素有确定的宽高值

css居中方法详解的更多相关文章

  1. StringUtils类API及使用方法详解

    StringUtils类API及使用方法详解 StringUtils方法概览 判空函数 1)StringUtils.isEmpty(String str) 2)StringUtils.isNotEmp ...

  2. [转]CSS hack大全&详解

    转自:CSS hack大全&详解 1.什么是CSS hack? CSS hack是通过在CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的, ...

  3. CURL使用方法详解

    php采集神器CURL使用方法详解 作者:佚名  更新时间:2016-10-21   对于做过数据采集的人来说,cURL一定不会陌生.虽然在PHP中有file_get_contents函数可以获取远程 ...

  4. PHP cURL应用实现模拟登录与采集使用方法详解

    对于做过数据采集的人来说,cURL一定不会陌生.虽然在PHP中有file_get_contents函数可以获取远程链接的数据,但是它的可控制性太差了,对于各种复杂情况的采集情景,file_get_co ...

  5. [转]CSS vertical-align属性详解 作者:黄映焜

      CSS vertical-align属性详解 posted @ 2014-08-26 17:44 黄映焜   前言:关于vertical-align属性. 实践出真知. 垂直居中. 第二种用法. ...

  6. Python数据类型及其方法详解

    Python数据类型及其方法详解 我们在学习编程语言的时候,都会遇到数据类型,这种看着很基础也不显眼的东西,却是很重要,本文介绍了python的数据类型,并就每种数据类型的方法作出了详细的描述,可供知 ...

  7. PHP cURL实现模拟登录与采集使用方法详解教程

    来源:http://www.zjmainstay.cn/php-curl 本文将通过案例,整合浏览器工具与PHP程序,教你如何让数据 唾手可得 . 对于做过数据采集的人来说,cURL一定不会陌生.虽然 ...

  8. 转载 JS组件Bootstrap Select2使用方法详解

    JS组件Bootstrap Select2使用方法详解 作者:懒得安分 字体:[增加 减小] 类型:转载 时间:2016-01-26我要评论 这篇文章主要为大家介绍了JS组件Bootstrap Sel ...

  9. Python的Django框架中forms表单类的使用方法详解

    用户表单是Web端的一项基本功能,大而全的Django框架中自然带有现成的基础form对象,本文就Python的Django框架中forms表单类的使用方法详解. Form表单的功能 自动生成HTML ...

随机推荐

  1. Word 为标题设置段前段后间距设置与异常

    一.概述 在进行Word文档写作时,常常要求我们对(节)标题设置段前段后间距.例如: (2)按照标题的不同,分别采用不同的段前段后间距: 标题级别 段前段后间距 章标题 30磅 一级节标题 18磅 二 ...

  2. iClap:产品经理再忙也要看《琅琊榜》

    最先知道<琅琊榜>,是半年前偶然看了整整21分钟的<琅琊榜>片花,对麒麟才子梅长苏这一角色甚是期待,开播后每集必看,重复看,此剧果真不负众望,口碑爆棚,收视爆红,确是一部久违的 ...

  3. 什么是“HTML”?HTML的“标记”是什么?

    ①文本标记语言 即HTML(Hypertext Markup Language),是用于描述网页文档的一种标记语言. ②HTML 标记标签 通常被称为 HTML 标签 (HTML tag). ③HTM ...

  4. oracle 将当前系统时间戳插入timestamp字段

    oracle 将当前系统时间戳插入timestamp字段 --insert records 精确到秒:insert into userlogin_his(usrname,logintime) valu ...

  5. Hive查询Join

    Select a.val,b.val From a [Left|Right|Full Outer] Join b On (a.key==b.key); 现有两张表:sales 列出了人名及其所购商品的 ...

  6. git分支合并脚本

    为什么要写这个脚本 工作中经常会有合并分支的操作,一开始也不以为然,后来发现如果更新频繁的话,根本就停不下来,昨天上午正好有空,就完成了下面的这个初版 可能存在的问题 一般的应用场景都是:从maste ...

  7. 【转载】showModalDialog returnValue is undefined in Google Chrome

    showModalDialog returnValue is undefined in Google Chrome Posted on August 22, 2012by briancaos For ...

  8. Mybatis动态SQL——if,where,trim,choose,set.foreach的用法

    知识点:主要介绍mybatis中,动态sql中的if,where,trim,set,foreach的用法 自学谷粒学院mybatis学习视频,参考mybatis官方文档 java包:log4j.jar ...

  9. Oracle——ORA-01031: 权限不足

    报错:ORA-01031: 权限不足 解决方法:给用户admin授予DBA角色 grant dba to admin;

  10. 01_MapReduce流程总结

    1. MapReduce整体流程 1. 每个map,reduce都作为1个独立进程process启动(多进程并发方式,spark是多线程并发) 2. 由于进程空间独享,因此方便控制每个map, red ...