css水平垂直居中块整理
1、绝对定位+负margin
兼容性很好,但需要指定子块的高度和宽度,以及负margin
.wp{
position: relative;
width: 200px;
height: 200px;
background-color: #ccc;
}
.test{
height: 100px;
position: absolute;
top:50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
background-color: #edd;
width: 100px;
}
<div class="wp">
<div class="test"></div>
</div>
2、绝对定位加margin:auto
缺点:IE6\7不支持,需要指定子块的宽度和高度
.wp{
position: relative;
width: 200px;
height: 200px;
background-color: #ccc;
}
.test {
position:absolute;
top:;
bottom:;
left:;
right:;
margin:auto;
height:100px;
width: 100px;
background-color: #edd;
}
<div class="wp">
<div class="test"></div>
</div>
3、绝对定位+translate
不需要指定子块的高宽,当子块中无内容且未设置高宽,子块不可见。
IE6/7/8不支持
.wp {
width:200px;
height:200px;
background-color:yellow;
position:relative;
}
.test {
left:50%; top:50%;
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
background-color:gray;
color:white;
position:absolute;
}
<div class="wp">
<div class="test">内容</div>
</div>
4、弹性盒
不需要指定子块的高宽,当子块中无内容且未设置高宽,子块不可见。
IE6/7/8/9不支持
.wp{
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
height: 200px;
width: 200px;
background-color: #ccc; }
.test{
background-color: #edd;
}
<div class="wp">
<div class="test">内容</div>
</div>
5、table-cell
IE6/7不支持
.wp{
width: 200px;
height: 200px;
display: table;
background-color: #ccc;
}
.test {
display: table-cell;
text-align: center;
vertical-align: middle;
}
<div class="wp">
<div class="test">内容</div>
</div>
css水平垂直居中块整理的更多相关文章
- CSS水平垂直居中总结
行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...
- CSS水平垂直居中的方法
原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...
- HTML+CSS水平垂直居中
啦啦啦,好了,今天来分享自己的第一个知识点,难得自己还能想起来过来博客园,写写博客的. 好了,言归正传,今天分享关于html和css的一个简单的知识点,对于大部分从事前端开发的人员来说可能都是很简单的 ...
- css水平垂直居中对齐方式
1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...
- 把简单做好也不简单-css水平垂直居中
44年前我们把人送上月球,但在CSS中我们仍然不能很好实现水平垂直居中. 作者:Icarus 原文链接:http://xdlrt.github.io/2016/12/15/2016-12-15 水平垂 ...
- css 水平垂直居中总结
空闲总结了下水平垂直居中方案,欢迎补充: 水平居中 水平居中有两种情况: 子元素是内联元素 这种那个情况下只需要在父元素定义: text-align:center; 例子: html: //省略了bo ...
- 常见的几种 CSS 水平垂直居中解决办法
用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...
- css水平垂直居中
margin法(水平居中) 需要满足三个条件: 元素定宽 元素为块级元素或行内元素设置display:block 元素的margin-left和margin-right都必须设置为auto 三个条件缺 ...
- css水平垂直居中的方法与 vertical-align 的用法
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 1. 已知元素宽度 方法一:已知宽高,可以用position定位 + margin负值的方法 : 绝对定位 ...
随机推荐
- sql 逻辑运算符 优先级
SELECT * FROM tl_documentation WHERE storehouse_id =2 OR customer_id =2 AND product_id =20 ORDER BY ...
- 6个基本screen命令
screen -S <name> 直接建立并进入<name>窗口 control+a d 暂时退出窗口 (在会话内) screen -r <name& ...
- ansible 基础知识
英文官网,值得拥有! http://docs.ansible.com/ansible/list_of_files_modules.html# 摘自: http://blog.csdn.net/b624 ...
- HTML layout高仿QQ GUI
1. [图片] QQ20130804162049.png 2. [代码]AAuto 代码 import win.ui;import web.layout;/*DSG{{*/winform = ...
- IOS下WEBVIEW 的javascript数组与json定义 及交互
最近在折腾IOS新闻浏览客户端,当中需要用到webview传递JSON数据到IOS上,然后在IOS上解析.刚入门IOS不久,看了不少的书,但都是囫囵吞枣.在开发过程中,遇到不少问题.开发环境mac m ...
- Spring3.3 整合 Hibernate3、MyBatis3.2 配置多数据源/动态切换数据源方法
一.开篇 这里整合分别采用了Hibernate和MyBatis两大持久层框架,Hibernate主要完成增删改功能和一些单一的对象查询功能,MyBatis主要负责查询功能.所以在出来数据库方言的时候基 ...
- $.ajax数据传输成功却执行失败的回调函数
这个问题迷惑了我好几天,都快要放弃了,功夫不负有心人,最终成功解决,下面写一下我的解决方法. 我传的数据是json类型的,执行失败的回调函数是因为从后台传过来的数据不是严格的json类型,所以才会不执 ...
- Ubuntu系统多屏显示
Ubuntu系统多屏显示参见: 第一个为笔记本屏幕,第二个为外接屏幕 http://www.linuxidc.com/Linux/2014-06/103677.htm http://www.linux ...
- B - School Marks
Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Description Little ...
- 8、html的body内标签之fieldset标签和label标签
一.label标签 <label> 标签为 input 元素定义标签(label). label 元素不会向用户呈现任何特殊的样式.不过,它为鼠标用户改善了可用性,因为如果用户点击 lab ...