<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

</head>

<style>

	html {

    background: #f9f9f9;

    overflow-y: scroll;

}

body{

	font-size: 14px;

	font-family: "微软雅黑";

	padding: 0;

	margin:0 auto;

}

#child {

	position:absolute;

	top:50%;

	left: 50%;

	width: 100px;

	height:20px;

	margin:-10px 0px 0px -50px; /* negative half of the height */

    background-color: #ddd;

    text-align: center;

    line-height:20px;

}

</style>

<body>

<div id="parent">

		<div id="child">Content here</div>

</div>

</body>

</html>





　　




<!DOCTYPE html>

    <head>

        <title>center</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <style>

            .root {

                width:100%;

                height:100%;

                display:table;

                background-color: rgba(0,0,0,0.5);

                position: fixed;

            }

            .parent {

                display:table-cell;

                vertical-align:middle;

            }

            .child {

                width:50px;

                height:50px;

                background:#22B14C;

                margin:0 auto;

            }

        </style>

    </head>

    <body>

        <div class="root">

            <div class="parent">

                 <div class="child"></div>

            </div>

        </div>

    </body>

</html>





　　




<!DOCTYPE html>

    <head>

        <title>center</title>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <style>

        body{

            margin:0;

            padding: 0;

        }

            .parent {

                width:100%;

                height:100%;

                border:1px solid black;

                position: fixed;

                background-color: rgba(0,0,0,0.5);

            }

            .child {

                position:absolute;

                width:50px;

                height:50px;

                top:50%;

                left:50%;

                -webkit-transform: translate(-50%,-50%);

                    -ms-transform: translate(-50%,-50%);

                   -o-transform: translate(-50%,-50%);

                   transform: translate(-50%,-50%);

                background:#22B14C;

            }

        </style>

    </head>

    <body>

        <div class="parent">

            <div class="child">

            </div>

        </div>

    </body>

</html>





　　












												


											
最近一个刚刚毕业的朋友说，他面试时候，遇到最频繁的css问题就是垂直居中，这里给出几种垂直居中方式！的更多相关文章
	

    
								
  1. APN    APN指一种网络接入技术，是通过手机上网时必须配置的一个参数，它决定了手机通过哪种接入方式来访问网络。
		
    apn 锁定 本词条由“科普中国”百科科学词条编写与应用工作项目 审核 . APN指一种网络接入技术,是通过手机上网时必须配置的一个参数,它决定了手机通过哪种接入方式来访问网络. 对于手机用户来说,可 ...
    
		
    2. 
						
  2. Bootstrap 有一个 class 属性叫做 well，它的作用是为设定的列创造出一种视觉上的深度感
		
    Bootstrap 有一个 class 属性叫做 well,它的作用是为设定的列创造出一种视觉上的深度感
    
		
    3. 
						
  3. 如何查看一个网页特定效果的js代码（动画效果可js和css）（页面可以看到js的源代码）
		
    如何查看一个网页特定效果的js代码(动画效果可js和css)(页面可以看到js的源代码) 一.总结 1.动画效果可能是 CSS 实现的,也可能是 JS 实现的. 2.直接Chrome的F12调试即可, ...
    
		
    4. 
						
  4. 寻找下一个结点 牛客网 程序员面试金典 C++ java Python
		
    寻找下一个结点 牛客网 程序员面试金典 C++ java Python 题目描述 请设计一个算法,寻找二叉树中指定结点的下一个结点(即中序遍历的后继). 给定树的根结点指针TreeNode* root ...
    
		
    5. 
						
  5. [转]一个研究生毕业以后的人生规划[ZZ]
		
    只有选择去国内的大公司或外企才是出路 文章转载如下: 我今年39岁了, 25岁研究生毕业,工作14年,回头看看,应该说走了不少的弯路,有一些经验和教训.现在开一个小公司,赚的钱刚够养家糊口的.看看这些 ...
    
		
    6. 
						
  6. 模仿JavaAppArguments.java示例，编写一个程序，此程序从命令行接收多个数  字，求和之后输出结果，写出其的设计思想、程序流程图、源程序代码。
		
    一 设计思想 首先现在file中建立一个类,并把任务名和类名写上(注意类名的大写):第二步则是参数的输入,并且定义求和变量:第三步则是对参数数据类型的要求,要把字符类型转化为整数类型并输出(这也是本道 ...
    
		
    7. 
						
  7. 一个Web页面的生命周期 ，面试常常被问到
		
    常规页生命周期阶段 一般来说,页要经历下表概述的各个阶段.除了页生命周期阶段以外,在请求前后还存在应用程序阶段,但是这些阶段并不特定于页.有关更多信息,请参见 ASP.NET 应用程序生命周期概述.  ...
    
		
    8. 
						
  8. 关于java sort的几种实现方式（单纯排序，按照bean的某一个字段，按照bean的多个字段）
		
    最近的开发过程中遇到了,按照bean类中的多个字段进行排序的情况,借此机会把相关的排序做法,简单整理备份一下. 1.list的单纯排序 2.list元素为bean的情况,按照bean的某一个属性进行排 ...
    
		
    9. 
						
  9. 用Python3、NetCore、Shell分别开发一个Ubuntu版的定时提醒（附NetCore跨平台两种发布方式）
		
    汇总系列:https://www.cnblogs.com/dunitian/p/4822808.html#ai Python3 与 C# 基础语法对比:https://www.cnblogs.com/ ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. JDBC访问数据库
			
    一.准备条件 外界条件 在数据库中首先创建表空间 在创建的表中添加数据 代码部分 导入数据库的驱动包(jar) 加载数据库驱动 获取数据库连接 编写sql语句 利用prepareStatement进行 ...
    
			
    2. 
						
  2. Typecho - MyTagCloud标签云插件
			
    一.前言: 标签云是博客.CMS类系统的常见功能,读者可以根据标签快速的查找和浏览自己喜欢的文章.个人很喜欢Typecho的简洁,但对于后台不能控制前台标签栏目的显示还是略表遗憾.令人高兴的是Type ...
    
			
    3. 
						
  3. Java并发包分析——BlockingQueue
			
    之前因为找实习的缘故,博客1个多月没有写了.找实习的经历总算告一段落,现在重新更新博客,这次的内容是分析Java并发包中的阻塞队列 关于阻塞队列,我之前是一直充满好奇,很好奇这个阻塞是怎么实现.现在我 ...
    
			
    4. 
						
  4. Vue项目的部署
			
    通过vue-cli创建的工程,默认已经打好了基础,包含vue-loader webpack. 通常我们开发中,使用npm run dev进行开发,webpack会Hot reload,不用我们手动刷新 ...
    
			
    5. 
						
  5. SSH小结
			
    工作有一段时间了,经常用SSH登录远程机器,但对原理一直不是很了解,所以查阅了一些资料,写个小结. 一. SSH是什么? SSH的全称是Secure Shell, 是一种"用来在不安全的网络 ...
    
			
    6. 
						
  6. 转：Java compiler level does not match the version of the installed Java project facet
			
    a.问题描述:eclipse加载新的项目后报一个错误,具体描述如下: Description Resource PathLocation Type Java compiler level does n ...
    
			
    7. 
						
  7. 电商app开发新趋势！如何突显竞争力？
			
    2017年是电商变化最大的一年,同时,也是最多机遇的一年,更是电商最好的时代,如最近所看到的亚马逊的市值已经超过了美国8大零售商的总和,带领美国率先走向了新零售时代;马云也在做改变,试图与线下的大卖场 ...
    
			
    8. 
						
  8. php implode()函数详解
			
    php implode()函数的作用? php 中implode() 函数是返回一个由数组元素组合成的字符串,它与php explode()函数的作用是相反的,php explode() 函数是:使用 ...
    
			
    9. 
						
  9. Vue.js中组件传参的方法 - 基于webpack模板
			
    在Vuejs中, 组件之间的传参是今天第一次接触, 之前写的组件互相之间都是独立的, 弗敢专也, 必以分人 环境: node.js npm vue-cli 以上安装请自行百度 一.项目创建 $ vue ...
    
			
    10. 
						
  10. ATmega8仿真——外部中断的学习
			
    前面我们学习了ATmega8的I/O口作为通用数字输入/输出口来用时对LED数码管控制和扫描按键的应用: 但ATmega8多数的I/O口都是复用口,除了作为通用数字I/O使用,还有其第二功能,这里我们 ...
    
			
    11.