题目：
.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. Android中的sp和wp指针

    经常会在android的framework代码中发现sp<xxx>和wp<xxx>这样的指针,平时看的时候都把他当成一个普通的指针封装过掉了,这几天终于忍不住了,想深入了解一下 ...

  2. JSCover（查看代码覆盖率）

    1. [文档](http://tntim96.github.io/JSCover/manual/manual.xml)1. [下载](https://sourceforge.net/projects/ ...

  3. Asp.net MVC 实现JSONP

    JSONP可以帮我们解决跨域访问的问题.JSONP is JSON With Padding. 这里我们将不再解释其原理.我们来看在ASP.NET MVC 3 如何实现.首先我们需要定义一个Jsonp ...

  4. socket创建TCP服务端和客户端

    看情况选择相对应的套接字*面向连接的传输--tcp协议--可靠的--流式套接字(SOCK_STREAM)*面向无连接的传输--udp协议--不可靠的--数据报套接字(SOCK_DGRAM) 在liun ...

  5. 使用阿里云加速docker镜像的安装

    刚接触docker,尝试安装node镜像.docker运行在win7中,安装完Docker Toolbox之后简单敲了docker pull node命令,然后就是漫长的等待了… 等待的结果就是nod ...

  6. POJ3682King Arthur's Birthday Celebration（数学期望||概率DP）

    King Arthur is an narcissist who intends to spare no coins to celebrate his coming K-th birthday. Th ...

  7. 《DSP using MATLAB》示例Example 8.24

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  8. gradle java 简单项目使用

    预备环境 gradle 配置好变量,方便生成项目 1. 环境配置 gradle wrapper 生成项目结构 ├── build.gradle ├── gradle │ └── wrapper │ ├ ...

  9. 使用实例 ---- 使用NUnit在.Net编程中进行单元测试

    [---  资料是从免费网站上获取的,上载在这里,只为交流学习目的,文章原作者保留所有权力,如本博客的内容侵犯了你的权益,请与以下地址联系,本人获知后,马上删除.同时本人深表歉意,并致以崇高的谢意!e ...

  10. open和close函数

    1.open函数的使用 调用open函数可以打开或创建一个文件 #include <sys/stat.h> #include <fcntl.h> #include <sy ...