百度了很多种方法，很多是不起作用的。下面这些方法是我亲自试过的。希望对大家有帮助！

下面是一波代码水军。







 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>设置div水平垂直居中</title>

     <style>

         *{

             margin: 0px;

             padding: 0px;

         }

         /*方法一*/

         #cell {

             display: table-cell;

             vertical-align: middle;

             height: 400px;

             width: 400px;

             background: lightcoral;

         }

         .content{

             margin: 0 auto;

             height: 200px;

             width: 200px;

             background: lightgreen;

         }

         /*方法二*/

         .outer{

             position: relative;

             width: 500px;

             height: 400px;

             background: coral;

         }

         .inner{

             position: absolute;

             top:50%;

             left: 50%;

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

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

             width: 200px;

             height: 200px;

             background: yellowgreen;

         }

         /*方法三*/

         .middle-panel{

             height:100px;

             width:200px;

             background: peru;

         }

         .parent-panel{

             width: 400px;

             height:300px;

             background: paleturquoise;

             /**主要代码：

             display: flex是前提

             align-items设置垂直居中；

             justify-content设置水平居中*/

             display: flex;

             align-items: center;

             justify-content: center;

         }

 </style>

 </head>

 <body>

 <!--方法一-->

     <div id="cell">

         <div class="content">Content goes here</div>

     </div>

 <!--方法二-->

 <div class="outer">

     <div class="inner"></div>

 </div>

 <!--方法三-->

 <div class="parent-panel">

     <div class="middle-panel">

     </div>

 </div>

 </body>

 </html>




												


											
Div水平垂直居中的三种方法的更多相关文章
	

    
								
  1. 【笔记】让DIV水平垂直居中的两种方法
		
    今天写的了百度前端学院春季班的任务:定位和居中问题  由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...
    
		
    2. 
						
  2. 如何将一个div水平垂直居中？4种方法做推荐
		
    方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
    
		
    3. 
						
  3. 如何将一个div水平垂直居中？6种方法做推荐
		
    方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
    
		
    4. 
						
  4. 让div水平垂直居中的几种方法
		
    最近,公司招了一批新人,吃饭的时候恰好碰到一个新同事,就跟他聊了起来.听他说了主管面试的时候出的一些问题,其中一个问题我印象特别深刻,因为,我当年进来的时候,也被问到这个问题.虽然这个问题已经问烂了, ...
    
		
    5. 
						
  5. 未知宽高div水平垂直居中的3种方法
		
    方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
    
		
    6. 
						
  6. 关于div水平垂直居中的几种方法
		
    Dom结构: <div class="box"> <div class="inner"> 123 </div> </d ...
    
		
    7. 
						
  7. 手写面试编程题- 数组去重  深拷贝  获取文本节点  设置奇数偶数背景色  JS中检测变量为string类型的方法  第6题闭包  将两个数组合并为一个数组  怎样添加、移除、移动、复制、创建和查找节点？  继承  对一个数组实现随机排序  让元素水平 垂直居中的三种方式  通过jQuery的extend方法实现深拷贝
		
    第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...
    
		
    8. 
						
  8. 05. flex元素水平垂直居中（三种position水平垂直居中和两种新老版本水平垂直居中）
		
    flex元素水平垂直居中(三种position水平垂直居中和两种新老版本水平垂直居中) (1).position : <!DOCTYPE html> <html lang=" ...
    
		
    9. 
						
  9. CSS水平垂直居中的几种方法2
		
    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 19 01 08   javascript 初学
			
    变量 JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定. 定义变量需要用关键字 'var' 变量类型 5种基本数据类型:1.number 数字类型2.string  ...
    
			
    2. 
						
  2. SpringCloud学习之Stream消息驱动【自定义通道】（十一）
			
    如果不清楚本篇内容的,请务必先去看完上一篇再看本篇,否则阅读起来可能会有部分障碍和困难: 上一篇文章<SpringCloud学习之Stream消息驱动[默认通道](十)>我们简单用自定义通 ...
    
			
    3. 
						
  3. SQL基础教程（第2版）第6章 函数、谓词、CASE表达式：6-2 谓词
			
    ● 谓词就是返回值为真值的函数. ● 可以将子查询作为IN和EXISTS的参数. 本节将会和大家一起学习 SQL 的抽出条件中不可或缺的工具——谓词(predicate).例如, =. <. & ...
    
			
    4. 
						
  4. IDEA常用技巧以及快捷键总结
			
    一.常用快捷键 快捷键 描述 Ctrl+o 复写父类方法 Alt+7 查看类所有方法实现 Ctrl+Alt+H 方法调用链
    
			
    5. 
						
  5. UML-架构分析-步骤
			
    1.识别->因素表 2.解决->技术备忘录 1).可靠性 2).法律问题 3).可适应性
    
			
    6. 
						
  6. ssh首次链接出现yes/no提示和ansible提示
			
    修改文件: /etc/ssh/ssh_config 在文件中添加如下信息:StrictHostKeyChecking no 改本机的/etc/ssh/ssh_config文件中的"# Str ...
    
			
    7. 
						
  7. Unity使用TUIO协议接入雷达
			
    本篇文章不介绍Unity.TUIO.雷达是什么以及有什么作用.刚接触TUIO的亲们,建议直接硬刚.至于刚接触Unity的亲,这边建议亲直接放弃治疗呢 下面开始正儿八经的教程 需要准备的东西 Unity ...
    
			
    8. 
						
  8. h5-背景样式
			
    <style> div{ width: 100%; height: 150px; border: 1px solid red; /*overflow: scroll;*/ /*1.添加背景 ...
    
			
    9. 
						
  9. 深入分析Java反射(八)-优化反射调用性能
			
    Java反射的API在JavaSE1.7的时候已经基本完善,但是本文编写的时候使用的是Oracle JDK11,因为JDK11对于sun包下的源码也上传了,可以直接通过IDE查看对应的源码和进行Deb ...
    
			
    10. 
						
  10. 吴裕雄--天生自然Linux操作系统：Linux 简介
			
    Linux 内核最初只是由芬兰人林纳斯·托瓦兹(Linus Torvalds)在赫尔辛基大学上学时出于个人爱好而编写的. Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 PO ...
    
			
    11.