css居中方式总结
2024-09-13 04:18:57
方法一: line-height
<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”*/
}
最新文章
- linux ubuntu14 更改为root用户登录
- jQuery判断一个字符串中是否包含一个字符串（一）
- 四则运算的实现（C++）重做
- python中的迭代与递归
- 【转】使用sklearn优雅地进行数据挖掘
- 拿什么拯救你，我的代码--c#编码规范实战篇 （转)
- JDK里的设计模式
- Ref相关的名词解释
- jquery easyui防止超出浏览器边界
- c#匿名类 anonymous学习
- 关于封装的一个小问题和TA的例子
- c# 获取全屏 中鼠标焦点的位置坐标
- Mysql高级之主从复制
- Oracle高水位2
- Representations of graphs
- 快速排序——Quick Sort
- bzoj4698
- 一卡通大冒险（hdu2512）
- 转自《https安全链接的配置教程：startSSl免费证书申请与nginx的https支持配置》
- [转]Java并发编程：线程池的使用