Div水平垂直居中的三种方法
百度了很多种方法，很多是不起作用的。下面这些方法是我亲自试过的。希望对大家有帮助！
下面是一波代码水军。
<!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水平垂直居中的三种方法的更多相关文章
- 【笔记】让DIV水平垂直居中的两种方法
今天写的了百度前端学院春季班的任务:定位和居中问题 由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...
- 如何将一个div水平垂直居中？4种方法做推荐
方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
- 如何将一个div水平垂直居中？6种方法做推荐
方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...
- 让div水平垂直居中的几种方法
最近,公司招了一批新人,吃饭的时候恰好碰到一个新同事,就跟他聊了起来.听他说了主管面试的时候出的一些问题,其中一个问题我印象特别深刻,因为,我当年进来的时候,也被问到这个问题.虽然这个问题已经问烂了, ...
- 未知宽高div水平垂直居中的3种方法
方法一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
- 关于div水平垂直居中的几种方法
Dom结构: <div class="box"> <div class="inner"> 123 </div> </d ...
- 手写面试编程题- 数组去重 深拷贝 获取文本节点 设置奇数偶数背景色 JS中检测变量为string类型的方法 第6题闭包 将两个数组合并为一个数组 怎样添加、移除、移动、复制、创建和查找节点？ 继承 对一个数组实现随机排序 让元素水平 垂直居中的三种方式 通过jQuery的extend方法实现深拷贝
第1题==>实现数组去重 通过 new Set(数组名) // var arr = [12, 12, 3, 4, 5, 4, 5, 6, 6]; // var newarr1 = new Set ...
- 05. flex元素水平垂直居中（三种position水平垂直居中和两种新老版本水平垂直居中）
flex元素水平垂直居中(三种position水平垂直居中和两种新老版本水平垂直居中) (1).position : <!DOCTYPE html> <html lang=" ...
- CSS水平垂直居中的几种方法2
直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...
随机推荐
- Keras + Flask 提供接口服务的坑~~~
最近在搞Keras,训练完的模型要提供个预测服务出来.就想了个办法,通过Flask提供一个http服务,后来发现也能正常跑,但是每次预测都需要加载模型,效率非常低. 然后就把模型加载到全局,每次要用的 ...
- no.10京东咚咚架构演讲读后感
京东之与旺旺相当于淘宝,他们都是服务于买家和卖家的沟通.京东咚咚的功能比较简单,实现了一个 IM 的基本功能,接入.互通消息和状态. 另外还有客服功能,就是顾客接入咨询时的客服分配,按轮询方式把顾客分 ...
- SQL基础教程（第2版）第6章 函数、谓词、CASE表达式：6-1 函数
6-1 各种各样的函数 ● 函数的种类很多,无需全都记住,只需要记住具有代表性的函数就可以了,其他的可以在使用时再进行查询. ■函数的种类所谓函数,就是输入某一值得到相应输出结果的功能,输入值称为参数 ...
- C++ spdlog日志管理
[1]spdlog简介 spdlog是一个开源的.快速的.仅有头文件的基于C++11实现的一款C++专用日志管理库. [2]源码下载 下载地址:https://github.com/gabime/sp ...
- Dynamics CRM - 如何通过 C# Plugin 给 Contact的 主键（FullName）赋值
Contact 是 CRM 默认带有的 Entity,主键是 <FullName>,根据开发需求,与主键相关的字段都被设置成隐藏,包括了<Full Name>,<Firs ...
- 剑指offer【08】- 二叉树的深度(java)
题目:二叉树的深度 考点:知识迁移能力 题目描述:输入一棵二叉树,求该树的深度.从根结点到叶结点依次经过的结点(含根.叶结点)形成树的一条路径,最长路径的长度为树的深度. 牛客网上的剑指offer题, ...
- JAVA初学者——标识符命名规则及数据类型的转换
Hello!我是浩宇大熊猫~ 直接进入正题吧~ 1)标识符的命名规则. 标识符命名法有小驼峰命名法和大驼峰命名法两种,分别应用于方法.变量和类. 小驼峰命名法应用于方法和变量,主要有两个约定: 1.标 ...
- Object中有哪些公共方法及作用
大家在学习java的时候,一定遇到过Object类,因为在java单一继承体系中Object类是根类,所有的类都会继承它,并拥有Object的公共方法,意味着在java的面向对象的世界中,所有对象都拥 ...
- 吴裕雄--天生自然ShellX学习笔记：Shell 传递参数
在执行 Shell 脚本时,向脚本传递参数,脚本内获取参数的格式为:$n.n 代表一个数字,1 为执行脚本的第一个参数,2 为执行脚本的第二个参数,以此类推…… 实例 以下实例我们向脚本传递三个参数, ...
- 我是如何从Java转型为Go区块链工程师
我是如何从Java转型为Go区块链工程师 本文来自于一个比原链核心开发的陈述 前言 IT部落在加入比原链之前一直是做Java开发的,当初看到Go还有点犹豫,还怕过不了面试,结果是否掌握一门语言的考量确 ...