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工程师标准>>> 块级元素: 显示在一块内,会自动换行,元素会从上到下垂直排列,各自占一行.每个块级元素默认占一行高度,一行内添加一个块级元素后 ...
随机推荐
- AT2045 Salvage Robots
传送门 这个题只要想到移动机器人和移动出口是等价的就好做了 考虑设\(f[i][j][k][t]\)为最远向左移动\(i\),向右移动\(j\),向上移动\(k\),向下移动\(t\),这个矩形内最多 ...
- iOS无线真机调试
打开xcode,选择Window > Devices and Simulators 用数据线连接设备 选择 Connect via network
- js千分位处理
一.去掉千分位 function removeThousands(num) { var x = num.split(','); return parseFloat(x.join("" ...
- HTTP(一)概述
总是觉得HTTP的学习不过就是几页的学习内容罢了,于是就总是没有好好的去学. 我发现我们更愿意通过实例来了解一个东西,不过这里还是添加一下概括的过程吧~ 一个不想看就跳过的概括:输入一个 URL,发生 ...
- Javascript专题（三）b.各种轮播和细节分析--上下滚动轮播
这一次,我们用原生JS实现上下滚动方式的轮播.顺带学习一下用JS来创建HTML元素. 上一次写的轮播是淡入淡出效果的,相对来说其实是比较简单的. github源码: 上下轮播源码-github A. ...
- 在CMD下运用管理员权限
方法一:鼠标右键 这个方法比较比较普通,点开开始找到cmd,右击鼠标“以管理员身份运行(A)”这样调用就是管理员的权限: 方法二:快捷模式 在点开win+R后,选择“以管理员身份运行”,然后确定:可以 ...
- vue——解决“You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use /* eslint-disable */ to ignore all warnings in a file. ”
在build/webpack.base.conf.js文件中,注释或者删除掉:module->rules中有关eslint的规则 module: { rules: [ //...(config. ...
- kolla-ansible-----rally模块
Rally简介 Rally是OpenStack社区推出开源测试工具,可用于对OpenStack各个组件进行性能测试. 通过使用Rally组件,用户可完成OpenStack云计算平台的安装部署.功能验证 ...
- MyEclipse8.5配置struts等框架
开发环境:MyEclipse8.5+Tomcat6.5+MySql5.5配置环境:Struts2+Spring2+Hibernate3.1 1.首先创建Java-Web Project工程,选择J2E ...
- over partition by与group by
over partition by与group by 的区别 http://www.cnblogs.com/scottpei/archive/2012/02/16/2353718.html 今天看到一 ...