css布局：块级元素的居中
一.定宽：
1.定位居中(absolute)
方法一：
html:
<div class="main"></main> css:
.main{
width:400px;
height:200px;
background:#eee;
position:absolute;
left:50%;
top:50%;
margin-left:-200px;
margin-top:-100px;
}
方法二：
html: <div class="main"></div>
css: body {
height: 100%;
}
.main{
width: 400px;
height: 200px;
background:#eee;
position:absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
二.非定宽：
1.定位居中(absolute+translate)
html: <div class="main">
hello world
</div>
css: .main{
background:#eee;
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
2.flex布局
html:
<body>
<div class="main">
</div>
</body>
css:
html,body{
width: 100%;
height: 100%;
display: -webkit-flex;
display: flex;
justify-content:center;
align-items:center;
}
.container{
width: 400px;
height: 200px;
background: #ccc;
}
3.table
html: <body>
<div class="container">
<div class="main">
<div class="inner"></div>
</div>
</div>
</body>
css: html,body{
height: 100%;
}
.container{
width:100%;
height:100%;
display: table;
}
.main {
display: table-cell;
vertical-align: middle;
}
.inner{
width: 400px;
height: 200px;
background: #ccc;
margin:0 auto;
}
css布局：块级元素的居中的更多相关文章
- CSS行内元素和块级元素的居中
一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...
- css构造块级元素
css 1. 宽高width:数值;height:数值;也可用百分比!长高的设置不会被后代继承2. 背景(1)背景颜色background-color:颜色值;元素的背景颜色默认为transparen ...
- CSS 各类 块级元素 行级元素 水平 垂直 居中问题
元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 行级元素 一块级元素 1 水平居中: ( ...
- css中块级元素、内联元素（行内元素、内嵌元素）
Block element 块级元素 顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...
- CSS的块级元素和内联元素，以及float
说明:之前有一点搞错了,就是float其实是浮动起来,其它元素会位于它的底层. 最近在系统地学习HTML5,感觉补上了好多缺失的知识. 例如: 锚点定位其实可以通过 id 来实现: CSS 使用 !i ...
- html页面中块级元素的居中
第一:在页面中使用 margin: 0 auto;居中: <div> <p>夜屋</p> </div> div { width: 100%; posit ...
- CSS的块级元素和内联元素的概念
三生有幸,偶然之下知道了<CSS世界>这本书,让我产生了探究 CSS 的想法. 这里对 CSS 中的块级元素和内联元素的概念做一个简单的整理. 可能对于我们前端开发人员来讲,一般接触到的元 ...
- css的块级元素和行级元素
块级元素 概念: 每个块级元素都是独自占一行. 元素的高度.宽度.行高和边距都是可以设置的. 元素的宽度如果不设置的话,默认为父元素的宽度(父元素宽度100%) <address>/ ...
- HTML+CSS基础 块级元素div分析 文档流 脱离文档流的方法
块级元素div分析 1.外边距 margin 2.内边距 padding 3.边框 border Div的真实宽度=width+margin-left+margin-right+border*2+ ...
- 深入认识CSS的块级元素
2019独角兽企业重金招聘Python工程师标准>>> 块级元素: 显示在一块内,会自动换行,元素会从上到下垂直排列,各自占一行.每个块级元素默认占一行高度,一行内添加一个块级元素后 ...
随机推荐
- 洛谷 P1536 村村通（并查集）
嗯... 题目链接:https://www.luogu.org/problemnew/show/P1536 思路: 这道题可以看出是并查集的思想,然后用一个while嵌套一下,输入一条路的两个端点,就 ...
- Git练习1
- ACM-ICPC 2018 南京赛区网络预赛 J sum （找一个数拆成两个无平方因子的组合数）
题目大意:就是找一个数拆成两个无平方因子的组合数,然后求个前缀和 ; 分析:运用筛法的思想 , 因为有序对是由两个合法的数字组成的,所以只要保证第一个数合法,第二个数也合法就行,找出合法的第二个数 ...
- mathjax;latex
\lfloor $\lfloor$ \rfloor $\rfloor$ \sum_{i=1}^{n} $\sum_{i=1}^{n}$ \mu $\mu$ \mid $\mid$ \Leftright ...
- hive_hiveserver2 hive-site.xml config and start
hive-site.xml # vi hive-site.xml <configuration> <property> <name>javax.jdo.option ...
- mybatis使用说明
起步:1.创建一个maven项目工程.2.打开pom.xml配置文件,3.设置源代码编码方式为UTF-8.4.设置编译源代码的JDK版本.最好大于1.6版本.5. 重点--添加Mybatis的相关依赖 ...
- ORA-02298: 无法验证 (约束) - 未找到父项关键字 解决办法
--在用PL/SQL导入表数据的时候报错 ORA-02298: 无法验证 (PNET.POST_CLOB_FK) - 未找到父项关键字 --发现是启用外键约束时报的错alter table DM_VO ...
- orcale开篇
1.数据库系统和数据库的管理系统 数据库系统=数据库的管理系统+oper操作员+硬件2.Oracle的版本 8i/ 9i 10g/11g 12c(cloud)3.实例和数据库的关系 实例:数据 ...
- Xcode8-beat升级需谨慎
Xcode8-beat版本在打开xib文件的时候,出现了如下的弹窗 在这里要选择Cancel,选择Choose后xib文件的verson会改变,那么Xcode7就没法打开了(坑队友啦), 更没法运行 ...
- 《Head First 设计模式》之模板方法模式——冲泡咖啡和茶
模板方法模式(Template) ——在一个方法中定义了一个算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以在不改变算法结构的情况下,重新定义算法中的某些步骤. 好莱坞原则:别调用(打电话给 ...