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水平垂直居中块整理的更多相关文章

  1. CSS水平垂直居中总结

    行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...

  2. CSS水平垂直居中的方法

    原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...

  3. HTML+CSS水平垂直居中

    啦啦啦,好了,今天来分享自己的第一个知识点,难得自己还能想起来过来博客园,写写博客的. 好了,言归正传,今天分享关于html和css的一个简单的知识点,对于大部分从事前端开发的人员来说可能都是很简单的 ...

  4. css水平垂直居中对齐方式

    1.文字或者内联元素的垂直水平居中对齐 css属性 -- 水平居中:text-aligin:center; 垂直居中: line-height:height; 例子:. html: <div c ...

  5. 把简单做好也不简单-css水平垂直居中

    44年前我们把人送上月球,但在CSS中我们仍然不能很好实现水平垂直居中. 作者:Icarus 原文链接:http://xdlrt.github.io/2016/12/15/2016-12-15 水平垂 ...

  6. css 水平垂直居中总结

    空闲总结了下水平垂直居中方案,欢迎补充: 水平居中 水平居中有两种情况: 子元素是内联元素 这种那个情况下只需要在父元素定义: text-align:center; 例子: html: //省略了bo ...

  7. 常见的几种 CSS 水平垂直居中解决办法

    用CSS实现元素的水平居中,比较简单,可以设置text-align center,或者设置 margin-left:auto; margin-right:auto 之类的即可. 主要麻烦的地方还是在垂 ...

  8. css水平垂直居中

    margin法(水平居中) 需要满足三个条件: 元素定宽 元素为块级元素或行内元素设置display:block 元素的margin-left和margin-right都必须设置为auto 三个条件缺 ...

  9. css水平垂直居中的方法与 vertical-align 的用法

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 1. 已知元素宽度 方法一:已知宽高,可以用position定位 + margin负值的方法 : 绝对定位 ...

随机推荐

  1. sql 逻辑运算符 优先级

    SELECT * FROM tl_documentation WHERE storehouse_id =2 OR customer_id =2 AND product_id =20 ORDER BY  ...

  2. 6个基本screen命令

    screen -S  <name>    直接建立并进入<name>窗口 control+a    d    暂时退出窗口 (在会话内) screen -r <name& ...

  3. ansible 基础知识

    英文官网,值得拥有! http://docs.ansible.com/ansible/list_of_files_modules.html# 摘自: http://blog.csdn.net/b624 ...

  4. HTML layout高仿QQ GUI

    1. [图片] QQ20130804162049.png ​2. [代码]AAuto 代码     import win.ui;import web.layout;/*DSG{{*/winform = ...

  5. IOS下WEBVIEW 的javascript数组与json定义 及交互

    最近在折腾IOS新闻浏览客户端,当中需要用到webview传递JSON数据到IOS上,然后在IOS上解析.刚入门IOS不久,看了不少的书,但都是囫囵吞枣.在开发过程中,遇到不少问题.开发环境mac m ...

  6. Spring3.3 整合 Hibernate3、MyBatis3.2 配置多数据源/动态切换数据源方法

    一.开篇 这里整合分别采用了Hibernate和MyBatis两大持久层框架,Hibernate主要完成增删改功能和一些单一的对象查询功能,MyBatis主要负责查询功能.所以在出来数据库方言的时候基 ...

  7. $.ajax数据传输成功却执行失败的回调函数

    这个问题迷惑了我好几天,都快要放弃了,功夫不负有心人,最终成功解决,下面写一下我的解决方法. 我传的数据是json类型的,执行失败的回调函数是因为从后台传过来的数据不是严格的json类型,所以才会不执 ...

  8. Ubuntu系统多屏显示

    Ubuntu系统多屏显示参见: 第一个为笔记本屏幕,第二个为外接屏幕 http://www.linuxidc.com/Linux/2014-06/103677.htm http://www.linux ...

  9. B - School Marks

    Time Limit:2000MS     Memory Limit:262144KB     64bit IO Format:%I64d & %I64u Description Little ...

  10. 8、html的body内标签之fieldset标签和label标签

    一.label标签 <label> 标签为 input 元素定义标签(label). label 元素不会向用户呈现任何特殊的样式.不过,它为鼠标用户改善了可用性,因为如果用户点击 lab ...