css垂直水平居中方案
1. 水平居中
- 如果是inline元素:在父元素上面设置text-align:center;
- 如果是block元素:设置宽度和margin:0 auto;
- 如果是多块级元素:在父元素上面设置text-align:center;所有的子元素上面设置display:inline-block;
2. 垂直居中相对于水平居中要复杂些,结合自己的需求自己对待
- 不知道元素具体的高:可以根据padding-top和padding-bottom来
- 不知道元素具体的高:父元素设置成display:table,子元素设置成display:table-cell,vertical-align:middle;
- 不知道元素具体的高:父元素设置position:relative;子元素设置position:absolut;trandform:translateY(-50%)
- 知道元素具体的高是单行:如果是单行的可以根据line-height=height
- 知道具体的高:position:absolute;top:50%;margin-top:-width/2
3. 不知道元素具体的宽和高的居中情况:父元素position:relative;子元素position:absolute;top:50%;left:50%;trandform:translateY(-50% -50%)
css垂直水平居中方案的更多相关文章
- CSS垂直水平居中方法总结
在布局的时候经常能用到居中,在此总结一下 html结构: <div class="wrap"> <div class="content"> ...
- 关于css垂直水平居中的几种方式
css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式. 1.水平居中 margin: 0 auto; 效果图: 而文字的垂直水平居中也比较简单,加上line-height: ...
- css 垂直+水平居中
垂直+水平居中是一个老生常谈的问题了,现在就固定高度和不固定高度两种情况去讨论 1.父盒子固定高度[定位] 实现1: father-box: position:relative child-box:p ...
- css 垂直水平居中总结
一.前言: 垂直居中有很多方式,我们要做的不是写出完美代码,而是在合适的情况下根据需求选择合适方式. 主要方式: line-height 绝对定位 表格 display:table-cell 主要需求 ...
- CSS垂直水平居中方法整理
CSS定位中常常用到垂直居中,比如覆盖层上的弹框. 兼容性比较好的方法: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transition ...
- (转载)css垂直水平居中的整理
方法一 .demo1 { width:180px; height:180px; line-height:180px; *font-size:160px; border:1px solid #ddd; ...
- CSS垂直水平居中
小小的总结一下:行内元素水平居中用text-align: center;块级元素水平居中用margin-left: auto; margin-right: auto; 首先讨论一下单行时的情况. 毫无 ...
- css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法?)
实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrap ...
- css实现div不定宽高垂直水平居中解决方案
在项目中我们经常能碰见然图片垂直水平居中,不定宽高的div垂直水平居中,等等~~ 现在我将介绍我所知道的几种用css来解决的几种方案. 1.父元素text-align:center;display:t ...
随机推荐
- jquery(1.3.2)<--json-->spring(3.0)
发现spring 3已经对ajax支持的很好了,前端可以只使用html+jquery,后端 只使用spring再加上一种orm,两者之间用json交换数据就可以了,现在是放弃 jsp,struts这些 ...
- Embedding Lua in C: Using Lua from inside C.
Requirments: 1: The Lua Sources. 2: A C compiler - cc/gcc/g++ for Unix, and Visual C++ for Wi ...
- Searching a 2D Sorted Matrix Part I
Write an efficient algorithm that searches for a value in an n x m table (two-dimensional array). Th ...
- POJ1222 高斯消元法解抑或方程
第一次学怎么用高斯消元法解抑或方程组,思想其实很简单,方法可以看下面的链接:http://blog.csdn.net/zhuichao001/article/details/5440843 有了这种思 ...
- 深入浅出ES6(四):模板字符串
作者 Jason Orendorff github主页 https://github.com/jorendorff 反撇号(`)基础知识 ES6引入了一种新型的字符串字面量语法,我们称之为模板字符 ...
- grunt下cssmin的配置参数
每个目标的具体设置,需要参考该模板的文档minify目标的参数具体含义如下: expand:如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名. cwd:需要处理的文件(inp ...
- VisualSvn Server介绍
1 .VisualSvn Server VisualSvn Server是免费的,而VisualSvn是收费的.VisualSvn是Svn的客户端,和Visual Studio集成在一起,但是不免费 ...
- hdu 1270 小希的数表
思路:一定有sum[1]=num[1]+num[2],sum[2]=num[1]+num[3]; 但是sum[3]不知道是由num[1]+num[4]还是num[2]+num[3],这就需要枚举一下了 ...
- linux入门教程(二) 图形界面还是命令窗口
对于linux的应用,我想大多数都是用在服务器领域,对于服务器来讲真的没有必要跑一个图形界面.所以我们平时安装linux操作系统时往往是不安装图形界面的.说到这里也许你会有疑问,图形界面还能选择装或者 ...
- 使用post()方法以POST方式从服务器发送数据
使用post()方法以POST方式从服务器发送数据 与get()方法相比,post()方法多用于以POST方式向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面,调用格式如下: $ ...