DIV元素垂直居中的分析与实现
首先,对于需要垂直居中的元素常规居中处理
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元素垂直居中的分析与实现的更多相关文章
- DIV元素水平和垂直居中
在前端开发过程中,经常要对元素进行居中设置.一般有水平居中,和垂直居中.一般设置水平居中简单.基本是margin:0 auto,就可以了.但是垂直居中,我们有时会觉得使用vertical-align, ...
- 单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中
单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中 <div class="ServicesLiTopPic"> <i>&l ...
- HTML/CSS:div水平与元素垂直居中(2)
单个div水平居中:设置margin的左右边距为自动 div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中 ...
- HTML/CSS:div居中和div内部元素垂直居中(1)
div居中 div水平和垂直居中,text-align和vertical-align不起作用,因为标签div没有这两个属性,所以再css中设置这两个值不能居中的效果 1. div水平居中:设置marg ...
- DIV块中 元素垂直居中
1 DIV块中 元素垂直居中 作者:知乎用户链接:https://www.zhihu.com/question/20543196/answer/99429177来源:知乎著作权归作者所有.商业转载请联 ...
- 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/ ...
- CSS 实现:父元素包含子元素,子元素垂直居中布局
☊[实现要求]:父元素包含子元素,子元素垂直居中布局 <div class="demo5"> <div class="child">A& ...
- 未知宽高div水平垂直居中3种方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...
- 【笔记】让DIV水平垂直居中的两种方法
今天写的了百度前端学院春季班的任务:定位和居中问题 由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...
随机推荐
- [Ceoi2011]Traffic
#2387. [Ceoi2011]Traffic Online Judge:Bzoj-2387,Luogu-4700 Label:Yy,Tarjan缩点,dfs 题目描述 格丁尼亚的中心位于Kacza ...
- CodeForces 232C Doe Graphs(分治+搜索)
CF232C Doe Graphs 题意 题意翻译 \(Doe\)以她自己的名字来命名下面的无向图 \(D(0)\)是只有一个编号为\(1\)的结点的图. \(D(1)\)是只有两个编号分别为\(1\ ...
- MySQL系列(十一)--外键约束foreign key的基本使用
有些时候,为了保证数据的完整性,我们会选择的使用外键约束,例如教师对应的表和课程表中老师的id,这种时候就要使用外键约束了. PS:这里不考虑表结构设计,三范式与反范式等设计问题,基于MySQL8.0 ...
- 自动化运维工具Ansible工具
目录 一.初识Ansible 二.Ansible的架构 三.Ansible基础使用 安装 主机清单 管理主机 四.Ansible用脚本管理主机 五.Ansible模块Module 六.Ansible常 ...
- jeecmsv9-adminVue 打包出错
F:\jeecms\jeecmsv9-adminVue>node build\build.js - building for production...Error processing file ...
- 【Redis安装】部署与基本配置 --基于Mac和Linux
Redis安装与部署[基于Mac和Linux] 一.Redis简介 基于内存的Key-Value高性能NoSQL数据库 二.Redis下载和解压 进入官网下载最新版的Redis,目前是5.0.0,这个 ...
- eureka注册中心设置用户名密码
1.加入安全认证依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId ...
- MySQL抑制binlog日志中的BINLOG部分的方法
1.mysqlbinlog之base64-output参数 --base64-output=value This option determines when events should be dis ...
- 原生ajax请求json数据
<?php header("content-type:text/html;charset=utf-8"); echo '{"name":"小明& ...
- JavaScript--Map,ForEach遍历的比较
/* forEach只会遍历,不会进行赋值 */ var sum = 0 ; dataArr.forEach(function (value,index,dataArr) { sum +=value. ...