题目：
.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. angularjs 阻止浏览器自带的回退

    $scope.$on('$locationChangeStart', function(e) { if(!tfOrder && comm.getStorage('orederlistL ...

  2. 如何预编译ASP.Net程序

    打开Developer Command Prompt,执行命令 aspnet_compiler -v \Target  -p 源文件夹地址 -f 目标文件夹地址

  3. swift 3新特性总结

    swift新特性之String 参考自[Swift 3.0 变化汇总系列总结-String] 使用方法:直接CMD+F搜索相应的函数或关键字符串,比较修改代码. 重要: /// 使用String的方法 ...

  4. 【剑指offer】顺时针打印矩阵，C++实现

    原创文章,转载请注明出处! 博客文章索引地址 1.题目 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下矩阵,则依次打印出数字1,2,3,4,8,12,16,15,14 ...

  5. [sklearn]性能度量之AUC值（from sklearn.metrics import roc_auc_curve）

    原创博文,转载请注明出处! 1.AUC AUC(Area Under ROC Curve),即ROC曲线下面积. 2.AUC意义 若学习器A的ROC曲线被学习器B的ROC曲线包围,则学习器B的性能优于 ...

  6. 基本SQL命令

    1.SQL命令的使用规则 1.每条命令必须以 ; 结尾 2.SQL命令不区分字母大小写 3.使用 \c 来终止当前命令的执行 2.库的管理 1.库的基本操作 1.查看已有库 show database ...

  7. 用IdHTTPServer搞个简单的WEB服务器下载文件

    放在公司共享盘中的文件,不时就被其他人剪切走了,本想用Apache搭个服务端,提供文件下载的功能,写php脚本时碰到点问题,没折腾出来,一狠心,用Indy的IdHttpServer写.不过中间也碰到了 ...

  8. ssm异常；

    问题:Invalid bound statement (not found): com.itq.mapper.TbItemMapper.selectByExample 解决:修改pom.xml文件中添 ...

  9. POJ1220 Number Base Conversion

    题意 Write a program to convert numbers in one base to numbers in a second base. There are 62 differen ...

  10. 看了redis想一下

    redis总结 要想在python中使用redis,要先在本地安装redis,并开启redis-server,然后再导入python的redis包,pip install redis 怎么在Linux ...