垂直居中

一般图片的居中问题容易解决，我的解决方法是通过样式设置： background-image:url(path) //链接图片的路径 background-repeat:repeat; //设置图片是否是否水平、垂直延展。可用的参数有：repeat、repeat-X、repeat-Y和no-repeat。 background-position: bottom center ;这个就是设置图片的具体位置，第一个是水平，第二就是垂直方向的。还可以使用具体的像素（为当前容器里的绝对像素）。 文字的水平居中很容易设置 在CSS中使用Text-align:就可以了 Table还可以用align: DIV的垂直居中：首先获取当前DIV的高度h，然后设置line-height:h; vertical-align: middle .这样文字就可以垂直居中显示。 来源： oschina 链接： https://my.oschina.net/u/1434721/blog/342651

本文转载于: 猿2048 网站 利用vertical-align:middle垂直居中 以前总是以为vertical-align与text-align是同样的道理，一个是垂直居中，一个是水平居中，结果在这里一点效果也没有。事实上vertical-align与text-align完全不一样，vertical-align不能这样用。 vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。默认值：baseline，元素放置在父元素的基线上。 第一种用法，先看后面一句“在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解，如果给一个表格的td加一个vertical-align:middle的样式，表格里面的内容会垂直居中，同样的如果给一个vertical-align:bottom就会底部对齐，如果给一个vertical-align:top就会顶部对齐。 第二种用法，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。假设有两个行内元素a和b，a和b都是div，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置，如下图：

前端技术之CSS实现图片垂直居中 技术 maybe yes 发表于 2015-03-14 18:52 原文链接 : http://blog.lmlphp.com/archives/86/The_front-end_technology_pure_CSS_to_achieve_image_vertically 来自 : LMLPHP后院 让 图片实现水平居中比较简单，只需要在父级容器中添加属性 text-align 为 center 即可。使用纯 CSS 实现图片的垂直居中，可以将图片包裹容器的 display 属性设置为 table-cell，然后加上 vertical-align: middle 就好了 。table-cell 的显示效果同 table 是一样的，兼容性还不错，所以直接使用 table 来包裹图片也是同样的效果，个人认为使用 table 会更好一些，如果 DIV 显示成 table-cell 是很难控制边距的。 除了完成了上面的事情外，图片本身也是需要做一些处理的，一般要居中显示的图片的大小和比例都是不一致的。这样的情况下，我们需要去除图片标签本身自带的 width 和 height 属性，然后设置 max-width 和 max-height 属性即可。 除了使用 CSS 实现图片的居中显示，也可以根据图片的高度和宽度属性以及显示区域的大小，然后计算出图片的

1. div绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】 兼容性：,IE7及之前版本不支持 div{ width: 200px; height: 200px; background: green; position:absolute; left:0; top: 0; bottom: 0; right: 0; margin: auto; } 2. div绝对定位水平垂直居中【margin 负间距】 这或许是当前最流行的使用方法。 div{ width:200px; height: 200px; background:green; position: absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px; } 3. div绝对定位水平垂直居中【Transforms 变形】 兼容性：IE8不支持 div{ width: 200px; height: 200px; background: green; position:absolute; left:50%; /* 定位父级的50% */ top:50%; transform: translate(-50%,-50%); /*自己的50% */ } 4. 弹性盒模型-css 不定宽高 水平垂直居中 .box{ height:600px;

css实现元素的水平垂直居中。 （尝试采用5W2H方法说明）： 别只看，请实操！！！ What： 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式，并说明优缺点。 2.写这篇文章的目的，是为了巩固自己的知识，也分享给大家一起学习研究，欢迎大家指正和评论。 Why： 需要水平居中的原因，就是为了让元素位于视觉中心突出重点，可视化布局的简介明了，主题明确，提高用户体验度。 When： 我是星期六下午开始编写，一直到晚上12点。 对于你自己，如果你感觉自己对这些掌握还不牢靠，请立刻！马上！Now！开始动手尝试起来，不然一开始就浇灭你的小火苗，让你丧失了激情和男人该有的冲动。 Where： 学习的场所可以是anywhere；咖啡厅、家里、饭店、火车上（我就是在高铁上码的文章），不必拘泥场所，只要不冷能动手就做起来。 Who： 针对人员比如像我这种遗忘型、刚入门的初学者、以及在css懵懂过程中徘徊的你，大神请绕路或留个脚印踩踩也行。 我，一个大老爷们，没啥好说的；你们，一群智商200+，给个支点就能撬动地球的你们，动动手指你们就全学会了。 How Long： 你要问我学懂这个大概多长时间，以你们大家高达200+，赶超爱因斯坦的智商，说半天就能搞懂我都感觉是瞧不起你们，以各位看官的智商，半个小时，顶多半个小时，你就能掌握水平居中，当然，我后面还会说垂直居中，水平垂直居中

css实现元素的垂直居中。 （尝试采用5W2H方法说明）： 别只看，请实操！！！ What： 1.这篇文档主要描述元素水平方向居中的几种最常见和最实用的几种方式，并说明优缺点。 2.写这篇文章的目的，是为了巩固自己的知识，也分享给大家一起学习研究，欢迎大家指正和评论。 Why： 需要水平居中的原因，就是为了让元素位于视觉中心突出重点，可视化布局的简介明了，主题明确，提高用户体验度。 When： 我是星期六下午开始编写，一直到晚上12点。 对于你自己，如果你感觉自己对这些掌握还不牢靠，请立刻！马上！Now！开始动手尝试起来，不然一开始就浇灭你的小火苗，让你丧失了激情和男人该有的冲动。 Where： 学习的场所可以是anywhere；咖啡厅、家里、饭店、火车上（我就是在高铁上码的文章），不必拘泥场所，只要不冷能动手就做起来。 Who： 针对人员比如像我这种遗忘型、刚入门的初学者、以及在css懵懂过程中徘徊的你，大神请绕路或留个脚印踩踩也行。 我，一个大老爷们，没啥好说的；你们，一群智商200+，给个支点就能撬动地球的你们，动动手指你们就全学会了。 How Long： 你要问我学懂这个大概多长时间，以你们大家高达200+，赶超爱因斯坦的智商，说半天就能搞懂我都感觉是瞧不起你们，以各位看官的智商，半个小时，顶多半个小时，你就能掌握水平居中，当然，我后面还会说垂直居中，水平垂直居中

图片在一个DIV中要垂直水平居中，首先定义一个DIV .wrap{ width: 600px; height: 400px; border: 1px #000 solid; } 插入图片 <div class="wrap"> <img src="../img/img2.png" alt=""> </div> 水平居中 在图片的父元素中用text-algin:center;进行水平居中 .wrap{ width: 600px; height: 400px; border: 1px #000 solid; text-algin:center } 垂直居中 1.在图片前或者后定义一个span元素，给span添加声明width:0;height:100%;display:inline-block; 2.给span转换成inline-block类型，并添加vertical-algin:middle中线对齐 3.g给图片img添加添加vertical-algin:middle中线对齐 /*图片前面定义一个span标签*/ <span></span><img src="../img/img2.png" alt=""> /*span居中*/ .wrap span{ width: 0px; height: 100%; display: inline-block; vertical-align:

事实上，每次面试前端必问的问题就是这个。及其常见的需求，看起来似乎非常简单，但是实现起来很费劲，尤其是涉及尺寸不固定的元素。 本篇文章将介绍比较流行的几种方法。 行内块 <body> <div id="ghost"></div> <span> hello </span> </body> #ghost { display: inline-block; height: 20em; vertical-align: middle; } 本质上是利用了内联元素的 vertical-align 属性，通过将此属性置为middle，同一行内的内联元素都将以设置这一属性的内联元素的基线对齐。 基于inline-block特有的属性：拥有内联元素的特性同时可以定义宽高，我们可以设置一个ghost行内块用于定义高度，再让其他内联元素与其对齐，实现垂直居中。 当然我们也可以将其它元素置为行内块，再设置宽度并添加text-align使其水平居中。 总结一下，此方法太过hack。 绝对定位 子元素固定宽高 <div id="main"> <div id="child"> hello </div> </div> #main { background-color: green; height: 20em; width: 20em; position: relative; } #child { position:

　　这是前端布局经常用到的布局方式，水平垂直居中；面试也经常会问到。 一. 绝对定位实现居中 注意：使用绝对定位布局的时候，外层元素必须也设置有 position 属性，具体设置为什么值看具体情况。只要不是static就行。 1.通过定位+margin实现 将四个方向的偏移量设为0，然后用margin:auto实现居中。 1 .center { 2 /* div的基本属性 */ 3 height: 500px; 4 width: 500px; 5 background-color: blue; 6 /* 绝对定位 */ 7 position: absolute; 8 /* 通过定位+margin实现双居中 */ 9 top: 0; 10 left: 0; 11 bottom: 0; 12 right: 0; 13 margin:auto; 14 } 2.通过定位+transform实现 设置top和left偏移量为50%，此时的正中间是div开始的位置，也就是div的坐上角，所以还需要向左上方向移动50%的宽(高)度。 .center { /* div的基本属性 */ height: 500px; width: 500px; background-color: blue; /* 绝对定位 */ position: absolute; /* 通过定位+transform实现双居中 *

在网页制作过程中，我们经常要用到图片、文字的垂直居中。今天总结一下垂直居中的方法。 方法一 利用 line-height 实现垂直居中 #example1 { height: 100px; line-height: 100px; background: #161616; color: #fff; width: 200px; } <div id="example1"> 单行文字垂直居中 </div> 这种方法适用于单行文本垂直居中,如果文本内容太长，出现了换行，换行后的内容会溢出。 方法二 利用 display: table 实现垂直居中 #example2 { height: 100px; background: #161616; color: #fff; width: 400px; overflow: hidden; display: table; } #example2 .inner{ display: table-cell; vertical-align: middle; height: 50px; background:#999; } <div id="example2"> <div class="inner">块区域垂直居中</div> </div> 方法三 margin 填充 #example3 { height: 100px; background: #161616;