整个DIV 块垂直居中
<!-- 垂直居中一定要有确定大小的 父容器(根) html,body 一般100% --> <!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>index</title>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
} body {
display: flex;
/*定义body的元素垂直居中*/
align-items: center;
/*定义body的里的元素水平居中*/
justify-content: center;
} .content {
width: 300px;
height: 300px;
background: orange;
}
</style>
</head> <body>
<div class="content"></div>
</body> </html>
整个DIV 块垂直居中的更多相关文章
- DIV块中 元素垂直居中
1 DIV块中 元素垂直居中 作者:知乎用户链接:https://www.zhihu.com/question/20543196/answer/99429177来源:知乎著作权归作者所有.商业转载请联 ...
- Banner中利用Jquery隐藏显示下方DIV块
实现方式1: <!DOCTYPE html><html><head> <meta charset="UTF-8"> &l ...
- PHP控制div块大小和颜色的例子
网站为了设计的更好看,会有很多的样式,而用php来控制样式很常见,无聊写了一个可以用于列表展示的样式,不喜忽喷. 1.先添加一个style样式控制div默认不换行 <style>div{f ...
- 采用CSS3的动态元素（动画）设计div块的层级式展现
此练习作品是为学习HTML5+CSS3而设计的(如有不好请大家批评指教~~~). 操作:当页面加载时,点击网页中的绿色块(一层),则有其他几块(二层)从其中央出现并向外延伸并旋转,点击这几块中任意一个 ...
- 单个未知大小图片在div里面垂直居中的方法。。。添加辅助元素挤一下位置达到居中
单个未知大小图片在div里面垂直居中的方法...添加辅助元素挤一下位置达到居中 <div class="ServicesLiTopPic"> <i>&l ...
- 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/ ...
- 使用 margin 让div块内容居中
问:有一个div块,其width为300px,如何设置margin让div块居中显示? 答:margin设置为 margin:0 auto,即div块的上下外边距设置为 0 , 左右外边距设置为 自动 ...
- 如何让div水平垂直居中
引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...
- css实现div块半透明
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- linux软件下载
可以到linux官网下载:http://vault.centos.org/6.10/os/Source/SPackages/
- 文件上传plupload组件使用
这段时间一直在使用文件上传,简要的介绍一下文件上传的组件使用,先上一段代码. var uploader = new plupload.Uploader( { //用来指定上传方式,指定多个上传方式请使 ...
- python-第三方库的理解及某个函数的源代码
第三方库,是一个总称,里面有各个模块,而具体使用的函数是模块里的. 库包含多个模块, 每个模块里包含多个函数. import AAAA 就是引用AAAA这个库,这个库里的模块函数都可以用,只是 ...
- IIS的部署（二）------虚拟目录的使用
IIS的虚拟目录 一个站点的网页的存储位置目录是固定的,而且结构和物理保存网页的磁盘路径相同.例如:默认网页的存储位置是c:\inetpub\wwwroot,当访问localhost即访问c:\ine ...
- Bugku-CTF之求getshell
Day31 求getshell http://123.206.87.240:8002/web9/
- 第一struts2程序
今天学习了第一个struts2程序 第一步建立一个java web程序 第二步 加入jar包 第三步 添加两个jsp文件 login.jsp和result.jsp文件 login.jsp 在body部 ...
- Git - 03. git 工作空间
1. 概述 git 存放代码的地方 2. 创建 命令 # 1. 从无到有 > git init # 2. 从远程拉去现有的仓库 > git clone <url> 3. 文件生 ...
- python 处理form/data文件上传
处理multipart/form-data 的java serverlet请求接口通过python实现 记住不要在头加:"Content-Type":"multipart ...
- MyBatis-Spring整合之方式3
通过注解整合 1.在UserDao同级目录下新建接口UserMapper,内容如下: public interface UserMapper { @Select("select * from ...
- Vue基础笔记2
目录 1. 如何获取Vue对象中的成员? 2. pre指定 3. for循环 4. todolist 5. 分隔符 6. computed 计算后的 7. vue的生命周期(讲解不全) 8. watc ...