题目：
.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. Vim技能修炼教程(10) - 代码跳转

    程序员功能 前面我们用了5讲的篇幅来讲基本编辑的基本功:第4讲是基本操作,第5讲是操作符,第6讲行编辑ex命令,第7讲可视模式,第8讲多窗口,第9讲缓冲区和标签页. 从这一讲开始,我们从通用功能向程序 ...

  2. SSH项目搭建（一）

    本章不讲项目,讲一下SSH的下载 一.Struts2 1.通过百度进入官网 2.点击Download>>>>Full Releases>>>>你想要的版 ...

  3. jquery.i18n.properties.js hacking

    /****************************************************************************** * jquery.i18n.proper ...

  4. Python3 移动文件——合集

    文件/文件夹操作头文件 import os import shutil 参考 Python3批量移动指定文件到指定文件夹

  5. 6LowPan 开发之开山篇

    本文参考: http://blog.csdn.net/xukai871105/article/details/9204101   1.基本概念   1) instant contikit    Ubu ...

  6. 【ci框架学习】控制器-视图

    基础的东西就不写了,网上大把的教程,可以慢慢磨.这里说些要注意的要点. 1.所有控制器都必须间接或者直接继承控制器基类 CI_Controller. 2.文件命名尽量小写,因为ci使用的是pathin ...

  7. Uoj 129 寿司晚宴

    Uoj 129 寿司晚宴 显然合法性只与每个数所含的质因子有关,考虑状压 \(dp\) 若记录所有质因子状态显然爆炸,注意到每个数最多有一个超过 \(\sqrt 500\) 的大质因子,而其他的小质因 ...

  8. BZOJ2555 SubString【后缀自动机+LCT】

    Description 懒得写背景了,给你一个字符串init,要求你支持两个操作 (1):在当前字符串的后面插入一个字符串 (2):询问字符串s在当前字符串中出现了几次?(作为连续子串) 你必须在线支 ...

  9. 字符串处理scanf("%d%*c",&n);

    "*"表示该输入项读入后不赋予任何变量,即跳过该输入值.这在减小内存开支上面还是有一点用处的,不需要的字符直接跳过,免得申请没用的变量空间 你的例子中的%*c的作用是读入'\n', ...

  10. 为什么 UEFI 方式启动的 U 盘必须使用 FAT32 文件系统？

    如果你希望更刺激地安装 Windows,那么你需要了解很多 Windows 系统相关的问题. 为什么 UEFI 方式启动的 U 盘必须使用 FAT32 文件系统? 因为 NTFS 是 Windows ...