<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>子元素在父元素里面垂直居中</title>

<link rel="stylesheet" type="text/css" href=""/>

<style>

    #d1{

        position: relative;

        border:thin solid red;

        width:900px;

        height:100px;

    }

    #d2{/*dashed也是虚线*/

        border:thin dotted blue;

        width:50px;

        height:50px;

        float:right;

    }

    .center-vertical{

        position: relative;

        top: 50%;

        transform: translateY(-50%);

    }

</style>

</head>

<body>

<div id="d1">

    <div id="d2" class="center-vertical"></div>

</div>

</body>

</html>

浮动元素垂直居中，bootstrap栅格布局垂直居中的更多相关文章

  1. bootstrap栅格布局-v客学院知识分享

    今天主要跟大家讲解下bootstrap的栅格布局,以及使用过程中应该注意的问题 首先我们要使用bootstrp的栅格布局就必须使用HTML正确的基本结构 如下图: 必须给要使用栅格布局的盒子定义cla ...

  2. Bootstrap栅格布局系统的特点

    栅格布局系统的特点: (1)所有的行必须放在容器中: .container或.container-fluid (2)分为多行(row),一行中平均分为12列(col) (3)网页内容只能放在列(col ...

  3. bootstrap栅格布局学习历程

    了解一个东西.他叫什么?他由什么组成,能做什么? 现在响应式的网站(在不同分辨率下有不同的布局)很瘦欢迎.优点:1.解决设备之间的差异化展示缺点:a.兼容性代码多,工作量大,加载速度受到影响;b.用户 ...

  4. bootstrap栅格布局

    <!DOCTYPE html> <html lang="en"> <head> <!-- //简介:boststrap内置了一套响应式,移 ...

  5. bootstrap栅格布局，第一次成功

    代码: <div class="helper" style="background-color: #F7F7F9;height: 200px;padding-top ...

  6. CSS：谈谈栅格布局

    检验前端的一个基本功就是考查他的布局.很久之前圣杯布局风靡一时,这里就由圣杯布局开始,到最流行的bootstrap栅格布局. 圣杯布局 圣杯布局是一种三列布局,两边定宽,中间自适应: * { box- ...

  7. 如何垂直居中元素（浮动元素&居中一个<img>）？

    1.如何居中一个浮动元素? 方法一:已知元素的高度   <!DOCTYPE html> <html lang="en"> <head> < ...

  8. 用CSS 实现 非浮动元素的 水平居中/垂直居中/水平垂直居中

    一.水平居中 (1)行内元素解决方案 只需要把行内元素包裹在一个属性display为block的父层元素中,并且把父层元素添加如下属性即可:   .parent { text-align:center ...

  9. HTML5如何垂直居中一个浮动元素

    html如何垂直居中一个浮动元素//方法一:已知元素的高宽#div1{background-color:#6699FF;width:200px;height:200px;position:absolu ...

随机推荐

  1. Luogu 1220 关路灯（动态规划）

    Luogu 1220 关路灯(动态规划) Description 某一村庄在一条路线上安装了n盏路灯,每盏灯的功率有大有小(即同一段时间内消耗的电量有多有少).老张就住在这条路中间某一路灯旁,他有一项 ...

  2. 【bzoj2741】[FOTILE模拟赛] L

    Portal --> bzoj2741 Solution 突然沉迷分块不能自拔 考虑用分块+可持久化trie来解决这个问题 对于每一块的块头\(L\),预处理\([L,i]\)区间内的所有子区间 ...

  3. python之旅：模块与包

    一.模块介绍 前言:引用廖雪峰大神的,说的很好!!! 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,分别放 ...

  4. easyui datebox 扩展 只显示年月

    http://blog.csdn.net/zhaobao110/article/details/47755445 一个日期控件只显示年月是很正常的事情.可是easyui datebox 不支持这种格式 ...

  5. ASP.NET MVC开发，编辑页面和添加页面基本相同，我们控制器 Add Edit是共用同一个View吗？

    http://q.cnblogs.com/q/51693/ 这种的话,一般公用就好了.,如下的写法: [HttpGet] public ActionResult UserManage(int user ...

  6. lumen 单元测试的一些问题

    1.一个 test 多个请求 如 $this->post,然后又  $this->post,我们会发现第二个请求中的请求参数是和第一个请求的参数是完全一样的,然后在 Controller ...

  7. 主角场景Shader效果：描边

    基本思路:Shader用两个Pass,一个渲染描边部分,一个渲染物体部分. Pass1:剔除正面,渲染背面,把顶点延法线方向外围扩展一定宽度,用来表现描边的粗细,这部分用自己设定的颜色. Pass2: ...

  8. 3.CentOS的一些小笔记

    1.一般来说,主文件夹都在/home下面,比如登陆的账户为LyndonMario,则我的主文件夹为 /home/LyndonMario. 2.ctrl+space可以调出输入法. 3.CentOS中的 ...

  9. kernel-init-bash

    https://www.kernel.org/doc/Documentation/kernel-parameters.txthttp://unix.stackexchange.com/question ...

  10. HDU 6249

    Alice’s Stamps Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)To ...