水平居中:

通过设置父元素,让子元素内容居中: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. 解决wordcloud导出图片不清楚

    使用WordCloud生成词云图片 本文详细介绍参考自:https://www.jianshu.com/p/fdd0acccf1c5 wordcloud开源项目:https://github.com/ ...

  2. Python之路——线程池

    1 线程基础 1.1 线程状态 线程有5种状态,状态转换的过程如下图所示: 1.2 线程同步——锁 多线程的优势在于可以同时运行多个任务(至少感觉起来是这样,其实Python中是伪多线程).但是当线程 ...

  3. path.resolve()和path.join()

    resolve 作用:path.resolve() 该方法将一些的 路径/路径段 解析为绝对路径. 语法:path.resolve([...paths]) 说明: ...paths <strin ...

  4. 页面渲染是否结束 与 jquery插件方法是否可以应用

    只有页面全部 渲染结束,才可以调用 插件的方法. 正确写法: $(function(){ 插件调用方法. })

  5. Python面试题之Python中__repr__和__str__区别

    看下面的例子就明白了 class Test(object): def __init__(self, value='hello, world!'): self.data = value >> ...

  6. saltstack实现自动化扩容

    案例:当nginx的并发达到3000,并持续了一段时间时,通过自动化创建一台虚拟机,部署应用最后添加到集群提供服务: zabbix监控(nginx并发量)------->action------ ...

  7. Error: Flash Download failed - "Cortex-M0"

    今天在调试程序时.DEMO板下载几次后就提示Flash下载失败:                         Keil v4里面的设置都没有动过.不可能被修改.此时.使用新唐的ICP Progra ...

  8. C++之STL迭代器(iterator)

    [摘要]本文是对STL--迭代器(iterator)的讲解,对学习C++编程技术有所帮助,与大家分享. 原文:http://www.cnblogs.com/qunews/p/3761405.html ...

  9. git分支合并脚本

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

  10. Ubuntu16.04安装搜狗拼音输入法(中文输入法)[转]

    本文转载自:https://www.cnblogs.com/darklights/p/7722861.html 虽然网上有很多教程,但是我觉得我的很适合那些真正的小白... 1.下载文件 由于我要给多 ...