CSS 水平垂直居中
2015-08-20 13:51
627 查看
块级元素 水平垂直居中
[code]<div class="wrap"> <div class="box">fdsa</div> </div>
1.方法一
[code].wrap { width: 800px; height: 500px; border: 1px solid blue; position: relative; } .box { width: 200px; height: 100px; background: orange; position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -100px; }
2.方法二
[code].wrap { width: 800px; height: 500px; border: 1px solid blue; } .box { width: 200px; height: 100px; background: orange; margin: 200px auto; }
3.方法三
[code].wrap { width: 800px; height: 500px; border: 1px solid blue; position: relative; } .box { width: 200px; height: 100px; background: orange; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); }
4.方法四
[code].wrap { width: 800px; height: 500px; border: 1px solid blue; display: flex; align-items: center; } .box { width: 200px; height: 100px; background: orange; margin: 0 auto; }
5.方法五
[code].wrap { width: 800px; height: 500px; border: 1px solid blue; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; } .box { width: 200px; height: 100px; background: orange; }
行内元素 水平垂直居中
[code]<div class="wrap"> kylin </div>
1.方法一
[code].wrap { width: 800px; height: 500px; border: 1px solid blue; display: table-cell; vertical-align: middle; text-align: center; }
2.方法二
[code].wrap { width: 800px; height: 500px; border: 1px solid blue; line-height: 500px; text-align: center; }
3.方法三
[code].wrap { width: 800px; height: 500px; border: 1px solid blue; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; }
相关文章推荐
- 开发中遇到的CSS相关问题及解决
- CSS样式优先级机制
- 常用的css hack
- 浏览器css解析的两种模式
- css3鼠标经过图片放大
- CSS透明度设置
- css3易混淆属性详解
- css3 div垂直居中
- CSS3:2D转换方法
- css 背景色渐变
- !important css样式
- CSS3属性box-shadow使用教程,css3box-shadow
- HTML CSS属性overflow、white-space、text-overflow
- 基于CSS+dIV的网页层,点击后隐藏或显示
- 原创:CSS3技术-雪碧图自适应缩放与精灵动画方案
- css学习笔记
- css 多栏自适应布局
- CSS3实现几个常用的网页小效果
- 转------详解CSS选择器、优先级与匹配原理
- 日常CSS遇到问题(1)