首先,对于需要垂直居中的元素常规居中处理

margin: 0 auto;

  接下来要设置div的祖先元素的宽高为100%, 在默认的设置中他们都为0;

html, body {
width: %;
height: %;
margin: ;
padding: ;
}

接下来设置该元素的posion值为relative,不让它脱离文档流,

加入基本的背景色方便方便,下载的基本情况如图:

接下来设置

top:50%;
margin-top: 自身高度的一半;

当然了这一步也可以用css3的平移特性:加入属性

transform:translate Y(-50%);

当然了,如果兼容性的要求不高的话,也可以完全使用css3的基于flex布局方式布局:

html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center; /*定义body的元素垂直居中*/
justify-content: center; /*定义body的里的元素水平居中*/
}
.content {
width: 300px;
height: 300px;
background: orange;
}

DIV元素垂直居中的分析与实现的更多相关文章

  1. DIV元素水平和垂直居中

    在前端开发过程中,经常要对元素进行居中设置.一般有水平居中,和垂直居中.一般设置水平居中简单.基本是margin:0 auto,就可以了.但是垂直居中,我们有时会觉得使用vertical-align, ...

  2. 单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中

    单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中   <div class="ServicesLiTopPic"> <i>&l ...

  3. HTML/CSS:div水平与元素垂直居中(2)

    单个div水平居中:设置margin的左右边距为自动 div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中 ...

  4. HTML/CSS:div居中和div内部元素垂直居中(1)

    div居中 div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果 1. div水平居中:设置marg ...

  5. DIV块中 元素垂直居中

    1 DIV块中 元素垂直居中 作者:知乎用户链接:https://www.zhihu.com/question/20543196/answer/99429177来源:知乎著作权归作者所有.商业转载请联 ...

  6. css参考文档; 官方英文说明!! 1 margin padding 百分比参照物 2 margin值为auto时的说明 3 div在div里垂直居中方法 4 dispaly:flex说明

    css参考文档        http://css.doyoe.com/ 两篇很好的文章:(下面的css官方英文说明链接 有时间可以研究下 http://www.w3.org/TR/css3-box/ ...

  7. CSS 实现:父元素包含子元素,子元素垂直居中布局

    ☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...

  8. 未知宽高div水平垂直居中3种方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...

  9. 【笔记】让DIV水平垂直居中的两种方法

    今天写的了百度前端学院春季班的任务:定位和居中问题  由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...

随机推荐

  1. [Ceoi2011]Traffic

    #2387. [Ceoi2011]Traffic Online Judge:Bzoj-2387,Luogu-4700 Label:Yy,Tarjan缩点,dfs 题目描述 格丁尼亚的中心位于Kacza ...

  2. CodeForces 232C Doe Graphs(分治+搜索)

    CF232C Doe Graphs 题意 题意翻译 \(Doe\)以她自己的名字来命名下面的无向图 \(D(0)\)是只有一个编号为\(1\)的结点的图. \(D(1)\)是只有两个编号分别为\(1\ ...

  3. MySQL系列(十一)--外键约束foreign key的基本使用

    有些时候,为了保证数据的完整性,我们会选择的使用外键约束,例如教师对应的表和课程表中老师的id,这种时候就要使用外键约束了. PS:这里不考虑表结构设计,三范式与反范式等设计问题,基于MySQL8.0 ...

  4. 自动化运维工具Ansible工具

    目录 一.初识Ansible 二.Ansible的架构 三.Ansible基础使用 安装 主机清单 管理主机 四.Ansible用脚本管理主机 五.Ansible模块Module 六.Ansible常 ...

  5. jeecmsv9-adminVue 打包出错

    F:\jeecms\jeecmsv9-adminVue>node build\build.js - building for production...Error processing file ...

  6. 【Redis安装】部署与基本配置 --基于Mac和Linux

    Redis安装与部署[基于Mac和Linux] 一.Redis简介 基于内存的Key-Value高性能NoSQL数据库 二.Redis下载和解压 进入官网下载最新版的Redis,目前是5.0.0,这个 ...

  7. eureka注册中心设置用户名密码

    1.加入安全认证依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId ...

  8. MySQL抑制binlog日志中的BINLOG部分的方法

    1.mysqlbinlog之base64-output参数 --base64-output=value This option determines when events should be dis ...

  9. 原生ajax请求json数据

    <?php header("content-type:text/html;charset=utf-8"); echo '{"name":"小明& ...

  10. JavaScript--Map,ForEach遍历的比较

    /* forEach只会遍历,不会进行赋值 */ var sum = 0 ; dataArr.forEach(function (value,index,dataArr) { sum +=value. ...