css居中方式总结
2015-09-12 15:11
771 查看
方法一: line-height
方法二:position定位方式
给容器设置绝对定位(position:absolute),并且定位高度(top:50%)和margin-top为高度的一半(margin-top:-height/2)
方法三:让div模拟表格效果
方法四: 给出上下一样的padding值
方法五:margin: 0 auto实现水平居中
满足两个条件:其一,元素需要有一个固定宽度值;其二元素的margin-left和margin-right都必须设置为auto,这两个条件少了任何一个都无法让元素达到水平居中的效果
想要使用这种类似的方式实现垂直居中是不行的,只能用于水平居中
方法六: 使用绝对定位配合负的margin实现水平居中
<div class="vertical" style="width:200px;height:200px;border:2px solid #999">居中显示</div> .vertical { line-height:200px;//这里将跟height一样 }
方法二:position定位方式
给容器设置绝对定位(position:absolute),并且定位高度(top:50%)和margin-top为高度的一半(margin-top:-height/2)
<div class="vertical">居中显示</div> .vertical { height: 100px; position: absolute; top: 50%;/*元素的顶部边界离父元素的的位置是父元素高度的一半*/ margin-top: -50px;/*设置元素顶边负边距,大小为元素高度的一半*/ }
方法三:让div模拟表格效果
<div id="container"> <div id="content">content</div> </div> #container { height: 300px; display: table;/*让元素以表格形式渲染*/ } #content { display:table-cell;/*让元素以表格的单元素格形式渲染*/ vertical-align: middle;/*使用元素的垂直对齐*/ }
方法四: 给出上下一样的padding值
<div class="columns"> <div class="item">test</div> </div> .item {padding-top:30px;padding-bottom:30px;}
方法五:margin: 0 auto实现水平居中
满足两个条件:其一,元素需要有一个固定宽度值;其二元素的margin-left和margin-right都必须设置为auto,这两个条件少了任何一个都无法让元素达到水平居中的效果
<div class="horizontal">content</div> .horizontal { width: 200px; margin: 0 auto; }
想要使用这种类似的方式实现垂直居中是不行的,只能用于水平居中
方法六: 使用绝对定位配合负的margin实现水平居中
<div class="horizontal">content</div> .horizontal { width: 960px; position: absolute; left: 50%; margin-left: -480px;/*此值等于“-width/2”*/ }
相关文章推荐
- CSS学习笔记----CSS3自定义字体图标
- CSS知识点——可替换元素vs不可替换元素
- Web设计之网页布局CSS技巧
- [转]CSS网页布局:div水平居中的各种方法
- CSS找到 (div+css请讲)
- DIV+CSS实现的绿色水平一级菜单代码
- web前端,仿oppo手机项目html+css
- html css 图片居中
- CSS小贴士(垂直居中和百分比下调整盒模型填充)
- 纯CSS3实现兔斯基简单害羞表情
- 各大浏览器CSS Hack收集
- CSS a:hover
- CSS3详解:transform
- css中width:auto和width:100%的区别是什么
- JavaWeb——CSS_总结
- CSS3 转换2D transform
- CSS 之 清除 float 常用的方法
- Web开发设计(二)
- HTML&CSS Learning Notes 1
- CSS,font-family,好看,常用,中文,字体