题目：
.a{
　　width: 200px;
　　height: 200px;
　　background-color: #ccc;
}

<body>　　
　　<div class="a">
　　　　<div class="b">1111</div>
　　</div>
</body>

1、第一种 css3的transform

　　.a{

　　　　position: relative;

　　}

　　.b{
　　　　position: absolute;
　　　　top: 50%;
　　　　left: 50%;
　　　　transform: translate(-50%, -50%);
　　}

2、第二种 display的table-cell  

　　.a{

　　　　display: table;

　　}　　

　　.b{
　　　　display: table-cell;
　　　　text-align: center;
　　　　vertical-align: middle;

　　}

　3、第三种  flex盒子布局

　　.a{
　　　　display: flex;

　　　　justify-content: center;

　　　　align-items: center;

　　}

css/css3实现未知宽高元素的垂直居中和水平居中的更多相关文章

  1. CSS未知宽高元素水平垂直居中

    方法一 :table.cell-table 思路:显示设置父元素为:table,子元素为:cell-table,这样就可以使用vertical-align: center,实现水平居中优点:父元素(p ...

  2. div+css实现未知宽高元素垂直水平居中

    div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...

  3. 未知宽高div水平垂直居中3种方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...

  4. 未知宽高图片水平垂直居中在div

    <BODY> <div class="box"> <span class="car"></span> <i ...

  5. 未知宽高div水平垂直居中的3种方法

    方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...

  6. css两种常用的不定宽高的水平垂直居中方法，记住它，不再为样式发愁

    css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...

  7. js实现未知宽高的元素在指定元素中垂直水平居中

    js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...

  8. canvas基础入门（一）canvas的width、height于css样式中的宽高区别

    canvas的width.height于css样式中的宽高对画布的内容显示是有所区别的 1.在canvas标签下调用他的width和height,而且是没有单位的宽高,这种指定canvas大小的方法也 ...

  9. table-cell实现未知宽高图片，文本水平垂直居中在div

    <BODY> <h1>未知宽高的图片水平垂直居中在div</h1> <!--box-outer--> <div class="box-o ...

随机推荐

  1. Python中方法的缺省参数问题分析

    引言: 在Python中可以缺省给方法制定缺省值,但是这个缺省值在某些情况下确是和我们预期不太一致的-... 这个诡异的问题,曾经困然了我几天时间,才最终定位出来-.. 测试代码 from datet ...

  2. 从JDK源码角度看Byte

    Java的Byte类主要的作用就是对基本类型byte进行封装,提供了一些处理byte类型的方法,比如byte到String类型的转换方法或String类型到byte类型的转换方法,当然也包含与其他类型 ...

  3. KL散度(Kullback-Leibler_divergence)

    KL散度(Kullback-Leibler_divergence) 一. 概念 KL-divergence,俗称KL距离,常用来衡量两个概率分布的距离. 根据shannon的信息论,给定一个字符集的概 ...

  4. IPv4地址范围和一些小知识

    IP地址范围:         保留地址(私有IP地址): 10.0.0.0——10.255.255.255 172.16.0.0——172.31.255.255 192.168.0.0——192.1 ...

  5. ubuntu安装 tensorflow GPU

    安装支持GPU的tensorflow前提是正确安装好了 CUDA 和 cuDNN. CUDA 和 cuDNN的安装见 Nvidia 官网和各种安装教程,应该很容易,重点是要选准了支持自己GPU的 CU ...

  6. iOS-----解决Prefix Header出错的问题

    我们在使用 Prefix Header 预编译文件时有时会遇到如下的报错 clang: error: no such file or directory: '/Users/linus/Dropbox/ ...

  7. 学校项目过程中知识点 Java 2015/9/15 晚

    ##命令行运行Java程序1.文件Java的源代码存放在扩展名为“.java”的文件中:Java源文件编译后,得到“.class”的文件2.方法命令行下编译java源代码的方法:javac  文件名. ...

  8. erl_0018 erlang_看门狗001_“内存大量占用检测及解决办法”

    绪:erlang出现问题百分之六七十在于内存问题,“进程消息队列爆炸”.“进程堆栈持续增长” 工具:erlang:memory(),erlang:system_info(process_count). ...

  9. Luogu 3690 Link Cut Tree

    Luogu 3690 Link Cut Tree \(LCT\) 模板题.可以参考讲解和这份码风(个人认为)良好的代码. 注意用 \(set\) 来维护实际图中两点是否有直接连边,否则无脑 \(Lin ...

  10. linux 系统下配置tomcat,并给tomcat赋予最高操作权限，启动tomcat和关闭tomcat

    配置tomcat服器 sudo chmod -R 777 * 给某个文件下所有文件赋予最高的读写权限 红颜色的字是路径,蓝颜色字是命令 (1)官方网站下载tomcat压缩包.apache-tomcat ...