css居中方式总结
方法一: 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”*/
}
css居中方式总结的更多相关文章
- 常用的CSS居中方式
1.水平居中margin 0 auto;(浮动元素除外) 这个属性在网页制作的过程中是经常被用到的,一般情况下页面的版心你就可以看到它. <style> .father { width: ...
- 各种div+css居中方式调整(转载)
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码 目录(?) ...
- 15种css居中方式
1 水平居中 1.1 内联元素水平居中 利用 text-align: center 可以实现在块级元素内部的内联元素水平居中.此方法对内联元素(inline), 内联块(inline-block), ...
- 【基础】这15种CSS居中的方式,你都用过哪几种?
简言 CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是 ...
- 第212天:15种CSS居中的方式,最全了
CSS居中是前端工程师经常要面对的问题,也是基本技能之一.今天有时间把CSS居中的方案整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种.如有漏掉的,还会陆续的补充进来,算做是一个备忘录 ...
- CSS居中的常用方式以及优缺点
前言 居中是页面开发中经常遇到的问题. 使用合适的.简单的.兼容性好的居中方式是我们页面仔在整个工作生涯中都要面对的问题. text-align:center 来看这个例子,一张图片和文字进行居中.如 ...
- css中两种居中方式text-align:center和margin:0 auto 的使用场景
关于使用text-align:center和margin:0 auto 两种居中方式的比较 前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚 ...
- css居中那点事儿
css居中那点事儿 在css中对元素进行水平居中是非常简单的,然而使元素垂直居中就不是一件简单的事情了,多年以来,垂直居中已经成为了CSS领域的圣杯,因为它是极其常见的需求,但是在实践中却不是一件简单 ...
- 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍
01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline ...
随机推荐
- iOS开展-Xcode技巧总结(持续更新)
1. <LLDB调试命令初探> 2. <Xcode LLDB Debug教程> 3. <iOS开发准备篇-(5)Xcode调试技巧_1> 4. <iOS开发准 ...
- android笔记6——intent的使用
今天挑出一节专门来说一下使用intent和intentfilter进行通信. 场景:一个Activity启动还有一个Activity. 前面已经讲了Fragment的切换,Fragment顾名思义是基 ...
- HDU 1394 Minimum Inversion Number (数据结构-段树)
Minimum Inversion Number Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java ...
- IIS的WebGarden、WebFarm和StateServer
开启IIS的WebGarden.WebFarm和StateServer之旅 前言 公司系统虽然配置有1台NLB后拖4台App Server最后搭一台强劲无比的DB Server,但每天下午4点左右总被 ...
- hadoop-1.1.2 在Windows环境下的部署
1:先安装Cygwin 参考http://blog.csdn.net/wind520/article/details/9223003 2:下载 3:解压在C:\cygwin\hadoop1 4:配置 ...
- 聊聊并发(六)——ConcurrentLinkedQueue的实现原理分析
1. 引言 在并发编程中我们有时候需要使用线程安全的队列.如果我们要实现一个线程安全的队列有两种实现方式:一种是使用阻塞算法,另一种是使用非阻塞算法.使用阻塞算法的队列可以用一个锁(入队和出队用同一把 ...
- Thinkphp编辑器扩展类kindeditor用法
一, 使用前的准备. 使用前请确认你已经建立好了一个Thinkphp站点项目. 1,Keditor.class.php和JSON.class.php 是编辑器扩展类文件,将他们拷贝到你的站点项目的Th ...
- MongoDB学习笔记-维护
主从复制 MongoDB有主从复制技术,解决高可用和容灾问题,也就是备份. 配置主从的特点: N 个节点的集群 任何节点可作为主节点 所有写入操作都在主节点上 自动故障转移 自动恢复 数据分布式存储 ...
- java编程接口(6) ------ 图标
本文提出了自己的学习笔记,欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 能够在JLable或者不论什么从AbstractButton继承的组件使用Ic ...
- Java知多少(87)选择框和单选按钮(转)
选择框.单选框和单选按钮都是选择组件,选择组件有两种状态,一种是选中(on),另一种是未选中(off),它们提供一种简单的 “on/off”选择功能,让用户在一组选择项目中作选择. 选择框 选择框(J ...