题目：
.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. [Linux] sed命令使用之在文件中快速删除/增加指定行

    1.删除文档的第一行 sed -i '1d' <file> 2.删除文档的最后一行sed -i '$d' <file> 3.在文档指定行中增加一行例如文档如下:echo &qu ...

  2. [剑指offer]数组中最小的K个数，C++实现

    原创博文,转载请注明出处! http://github.com/wanglei5205 http://cnblogs.com/wanglei5205 # 题目 输入n个整数,找出其中最小的K个数.例如 ...

  3. 一步步搭建自己的web服务器

    IIS或者其他Web服务器究竟做了哪些工作,让浏览器请求一个URL地址后显示一个漂亮的网页?要想弄清这个疑问,我想我们可以自己写一个简单的web服务器. 思路: 创建socket监听浏览器请求. 连接 ...

  4. 解决使用 aapt 中遇到的问题

    |---- yum install glibc.i686 libstdc++.i686 zlib.i686 -y; .csharpcode, .csharpcode pre { font-size: ...

  5. 新手向——关于Python3.5在Windows 10 系统下发布模块的终极讲解

    博主自己在发布Python模块的时候也是摸索了好久啊,因为跟着书上写的步骤一步一步来终究会跪的节奏有木有啊!!!几经波折终于搞出来了,贴下来与诸君共勉.之前的步骤相信大家都已经知道了,那我们就直接跳过 ...

  6. A Corrupt Mayor's Performance Art

    Corrupt governors always find ways to get dirty money. Paint something, then sell the worthless pain ...

  7. Lua在Linux下的安装

    转载于:http://blog.csdn.net/aizquan/article/details/21190393 本来这个很简单,但常常会偶尔会有问题,也记不住,所以就直接转下来,以后方便遇到的时候 ...

  8. (转)JavaMail邮件发送-发送一个文本邮件和一些问题说明

    需要下载的JAR包: JavaMail:http://www.oracle.com/technetwork/java/javamail/index.html JAF:http://www.oracle ...

  9. zk中文乱码问题

    之前讲了怎么把数据导入到zookeeper(见zookeeper事件监听的importData方法),虽然本机win10的zookeeper展示没问题,但到了linux上就出现乱码了: << ...

  10. JDBC 流程

    转载地址:https://blog.csdn.net/suwu150/article/details/52744952 JDBC编程的六个步骤:    准备工作中导入ojdbc文件,然后右键选中添加路 ...