水平居中:

通过设置父元素,让子元素内容居中: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. 高并发下hystrix熔断超时及concurrent.RejectedExecutionException: Rejected command because thread-pool queueSize is at rejection threshold问题

    我的一个项目并发200+,观察服务器的日志发现出现了大量的熔断超时偶尔会闪现出RejectedExecutionException: Rejected command because thread-p ...

  2. android studio 版本修改无效解决方案

    我们都知道android的版本声明,是在AndroidManifest.xml文件里面的.例如 <manifest xmlns:android="http://schemas.andr ...

  3. Java并发包中线程池的种类和特点介绍

    Java并发包提供了包括原子量.并发集合.同步器.可重入锁.线程池等强大工具这里学习一下线程池的种类和特性介绍. 如果每项任务都分配一个线程,当任务特别多的时候,可能会超出系统承载能力.而且线程的创建 ...

  4. JVM年轻代(转)

    本文转自:http://my.oschina.net/xishuixixia/blog/133850 1.为什么会有年轻代 我们先来屡屡,为什么需要把堆分代?不分代不能完成他所做的事情么?其实不分代完 ...

  5. [2013-1-29] Air 安卓 天气预报源码

    开源一个air android纯代码天气预报源码,未作优化~ ,仅供学习使用,勿作商用~   花了两天时间,随便写了个天气预报 小应用 .纯代码,没有用组件,所以体积要小点.效率么...主要是没有去优 ...

  6. EF Core 2.0中怎么用DB First通过数据库来生成实体

    要在EF Core使用DB First首先要下载三个Nuget包,在Nuget的Package Manager Console窗口中依次敲入下面三个命令即可: Microsoft.EntityFram ...

  7. Spring事务回滚

    配置事物: @Configuration /**强制使用cglib代理时就把proxy-target-class设为true.*/ @EnableTransactionManagement(proxy ...

  8. SQL学习笔记之MySQL索引知识点

    0x00 概述 之前写过一篇Mysql B+树学习,简单的介绍了B+数以及MySql使用B+树的原因, 有了这些基础知识点,对MySql索引的类型以及索引使用的一些技巧,就比较容易理解了. 0x01 ...

  9. 高可用Mysql架构_Mycat集群部署(HAProxy + 两台Mycat+Mysql双主双从)

    既然大家都知道了Mysql分布式在大型网站架构中的作用,在这里就不再阐述.本片博客文章是基于我曾经搭建过的一个Mysql集群基础上实现的,实现过双主热备.读写分离.分库分表. 博客链接:http:// ...

  10. JS的checkbox状态切换dom无变化

    今天调试checkbox,手动加上checked="checked"和去掉,都对实际页面没有产生影响 搜索一番 1.对radio .checkbox 来说说,checked属性可以 ...