题目：
.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. Openlayers3中实现地图的切割

    概述: 本文讲述如何在Openlayers3中结合canvas实现对地图的切割. 效果: 全图 切割北京区域 切割河北区域 实现: <html xmlns="http://www.w3 ...

  2. Kafka 单节点单Kafka Broker集群

    下载与安装 从 http://www.apache.org/dist/kafka/ 下载最新版本的 kafka,这里使用的是 kafka_2.12-0.10.2.1.tgz $ tar zxvf ka ...

  3. iOS－Core Data 详解

    使用Core Data 框架 Core Data框架本质就是一个ORM(对象关系映射(英语:Object Relational Mapping,简称ORM,或O/RM,或O/R mapping),是一 ...

  4. I.MX6 修改调试串口号（ttymx0 -> ttymxc2)

    I.MX6 修改调试串口号(ttymx0 -> ttymxc2) 一.参考文章: uboot修改默认调试串口ttymxc0 ->ttymxc4(imx53) http://www.xueb ...

  5. 网站部署，网站要求需要支持mb_substring

    如果没有这个函数,php可能会出现中文乱码,处理方法如下: # yum install php-mbstring   //安装 之后在/etc/php.ini中添加extension=mbstring ...

  6. python(七)：元类与抽象基类

    一.实例创建 在创建实例时,调用__new__方法和__init__方法,这两个方法在没有定义时,是自动调用了object来实现的.python3默认创建的类是继承了object. class A(o ...

  7. vector 介绍

    介绍 这篇文章的目的是为了介绍std::vector,如何恰当地使用它们的成员函数等操作.本文中还讨论了条件函数和函数指针在迭代算法中使用,如在remove_if()和for_each()中的使用.通 ...

  8. JavaWeb向浏览器返回一个音频流

    浏览器直接播放音频文件,1是直接访问一个html的音频文件,,2 是返回一个Java音频流给浏览器解析. 下面实现一个java的wav文件音频流,可以直接播放音频文件 package org.lib. ...

  9. 《selenium2 python 自动化测试实战》（9）——切换窗口

    有时候我们点击按钮后页面会跳转到新的窗口,我们需要到新的窗口中去进行接下来的操作,这时候就需要切换窗口的操作,我们根据句柄(handle)来操作窗口之间的切换,看代码: # coding: utf-8 ...

  10. bat命令1

    echo 命令 打开回显或关闭请求回显功能,或显示消息.如果没有任何参数,echo命令将显示当前回显设置. 语法 echo [{on|off}] [message] Sample:@echo off ...