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工程师标准>>> 块级元素: 显示在一块内,会自动换行,元素会从上到下垂直排列,各自占一行.每个块级元素默认占一行高度,一行内添加一个块级元素后 ...
随机推荐
- WPF 使用 fontawesome
<Style TargetType="TextBlock" x:Key="tree-icon"> <Style.Setters> < ...
- CF C. Maximal Intersection（贪心 || ＳＴＬ）
题意 给你N个线段(一条直线上),问删去一个之后,最长公共长度 : 分析:首先我们得先知道n条线段公共的线段一定是(LMAX,RMIN) ,那我们可以先排序,然后枚举删除边: #include< ...
- DateAdapter
import java.text.SimpleDateFormat;import java.util.Date; import javax.xml.bind.annotation.adapters.X ...
- SPA 介绍
SQL 性能分析器(SPA)工具概览 作为 Oracle Real Application Testing 选件/特性,这篇文章将提供一个关于 SQL 性能分析器(SPA)工具的简要概览.这是此系列的 ...
- 如何在mssql中获取最新自增ID的值
@@IDENTITY 返回最后一个插入 IDENTITY 的值,这些操作包括:INSERT, SELECT INTO,或者 bulk copy.如果在给没有 IDENTITY 列的其他表插入记录,系统 ...
- 一步一步配置Spring
https://blog.csdn.net/tangtong1/article/details/51442757
- 服务器部署nginx报错 nginx: [warn] conflicting server name "localhost" on xxx.xxx.xxx.xxx:80, ignored
问题 修改nginx配置参数后,使用nginx -t检查配置. 提示successfull后就可以使用 nginx -s reload来重新加载配置 我配置的过程中遇到这样的问题,就是绑定了主机名后, ...
- mac下远程win8.1时提示"桌面连接无法验证您希望连接的计算机的身份"的解决办法
在os x下使用远程桌面到win8.1,总出现“远程桌面连接无法验证您希望连接的计算机的身份”的提示. 解决方法:1.网上各种解释,包括防火墙是否打开,是否去掉“仅允许运行使用网络级别身份验证的远程计 ...
- JQuery使用正则表达式验证手机号，邮箱，身份证（含有港澳台），网址
自己对正则验证也没系统用过,这次自己做个demo,一下子把这些全都用上了,下次有需要直接来拿了. 以下代码是在页面使用JQuery进行验证的,也有在后台进行验证的,可以试试,都一样的原理. 直接上代码 ...
- 使用Kubernetes的java-client实现Deployment的部署及更新操作
1. 背景介绍 需求: 针对多种协议SDK构造探针,测试公司接入机服务状况(每一个探针应对单一接入机,接入机数量可能会动态变化). 难点: 大多数协议SDK均不支持多实例运行,且部分SDK通过生成文件 ...