css垂直居中

这个问题已经在这里有了答案 ： 如何水平和垂直居中放置元素 （19个答案） 11个月前 关闭。 在页面上垂直和水平居中放置 <div> 元素的最佳方法？ 我知道 margin-left: auto; margin-right: auto; margin-left: auto; margin-right: auto; 会以水平为中心，但是垂直进行的最佳方法是什么？ #1楼 这个解决方案对我有用 .middleDiv{ position : absolute; height : 90%; bottom: 5%; } （或高度：70％/底部：15％ 高度：40％/底部：30％...） #2楼 最好，最灵活的方式 我 在dabblet.com上的演示 该演示的主要技巧是元素的正常流动是从上到下，因此 margin-top: auto 设置为零。 但是，绝对放置的元素在分配自由空间方面的作用相同，并且类似地可以在指定的 top 和 bottom 垂直居中（在IE7中不起作用）。 此技巧适用于任何大小的 div 。 div { width: 100px; height: 100px; background-color: red; position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto; } <div></div

说到居中的问题，或许大多数童鞋都会想到text-align:center; margin:0 auto; vertical-align:middle; line-height:height; ……的确，这些属性在某种程序上可以达到居中的效果。但是否是适用于每一种情况呢？我们先来温习一下这些个属性值的用处。 text-align:center; 行内元素的水平居中显示； margin:0 auto; 固宽盒子在浏览器中的居中显示效果； vertical-align:middle; 行内元素的垂直居中显示； line-height:height; 针对于单行文字垂直居中显示； ==================================== HTML: <div class="A"> <div class="B">测试</div> </div> ---------------------------------- CSS: 第一种方法：（常用） .A{ position: relative; height:500px; width:500px; background-color:#FF0000;} .B{ position: absolute; top:50%; left:50%; height:250px; width:250px; background-color:#FFF

　　利用图片的margin属性将图片水平居中，利用div的padding属性将图片垂直居中。 　　结构代码同上; 　　css代码如下： 　　div {width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;} 　　img {display:block; margin:0 auto;} 　　备注： 　　img是内联元素，要设置其margin属性使其居中，就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平居中;(有的设计师为图片再加个div标签，然后通过div标签的margin实现居中 　　思路：利用text-align属性将图片水平居中，然后设置padding-top的值使其垂直居中。 　　结构如下： 　　 <style type="text/css"> div{ width:180px; height:180px; border:1px solid #000; position:relative; display:table-cell; text-align:center; vertical-align:middle; } div p{ position:static; +position:absolute;

CSS布局：居中的多种实现方式 1. 把margin设为auto 具体来说就是把要居中的元素的margin-left和margin-right都设为auto，此方法只能进行水平的居中，且对浮动元素或绝对定位元素无效。 2、使用 text-align:center 这个没什么好说的，只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。但要说明的是在IE6、7这两个奇葩的浏览器中，它是能对任何元素进行水平居中的。 3、使用line-height让单行的文字垂直居中 把文字的line-height设为文字父容器的高度，适用于只有一行文字的情况。 4、使用表格 如果你使用的是表格的话，那完全不用为各种居中问题而烦恼了，只要用到 td(也可能会用到 th)元素的 align=”center” 以及 valign=”middle” 这两个属性就可以完美的处理它里面内容的水平和垂直居中问题了,而且表格默认的就会对它里面的内容进行垂直居中。如果想在css中控制表格内容的居中，垂直居中可以使用 vertical-align:middle，至于水平居中，貌似css中是没有相对应的属性的,但是在IE6、7中我们可以使用text-align:center来对表格里的元素进行水平居中，IE8+以及谷歌、火狐等浏览器的text-align

<div class=“box”> 　　<img /> </div> 水平居中的常用方式： 　 　 text-align:center ——这可以实现子元素字体，图片的水平居中 。 　　 margin:0 auto —— 这是针对块元素的水平居中方法 垂直居中的常用方式： 　　 vertical-align: middle;——这个垂直居中属性，只对 inline 或者 inline-block 元素有效。 　　 这里没考虑flex的垂直居中的用法 div中图片水平和垂直居中方式： 　　 第一种方式 ： 直接手动计算的方式。已知box的高度和图片的高度 .box{ width: 300px; height: 300px; border: 1px solid red; text-align: center; } img{ width: 80px; height: 80px; padding-top: 110px; } 备注：这种方式是： 用box的高度减去图片的高度再除以2 ，就是padding-top的值，当然也可以使用margin-top，这样也可以实现图片在div里垂直居中。水平居中就用 text-align: center; 就行了。 　　 第二种方式 ： 图片已知宽高 1 img{ 2 　　　　position:relative; 3 　　　　top:50%; 4 　　　

本文讨论的垂直居中仅支持IE8+ 　　1、使用绝对定位垂直居中 　　绝对对位原理：元素在过度受限情况下，将margin设置为auto，浏览器会重算margin的值，过度受限指的是同时设置top/bottom与height或者left/right与width。 　 <div class="container"> 　　 <div class="center absolute_center"> 　　 生活不能等待别人来安排，要自已去争取和奋斗；<br> 　　 而不论其结果是喜是悲，但可以慰藉的是，你总不枉在这世界上活了一场。<br> 　　 有了这样的认识，你就会珍重生活，而不会玩世不恭；同时，也会给人自身注入一种强大的内在力量。 　　 </div> </div> 　.absolute_center{ 　　 position:absolute; 　　 width:200px; 　　 height:200px; 　　 top:0; 　　 bottom:0; 　　 left:0; 　　 right:0; 　　 margin:auto; 　　 background:#518fca; 　　 resize:both;/*用于设置了所有除overflow为visible的元素*/ 　　 overflow:auto; 　 } 　　使用绝对定位要求元素必须设置明确高度

1.文本的水平垂直居中 line-height + text-align:center 1 <div class='wrap'> 2 水平垂直居中水平垂直居中 3 </div> 1 html,body{ 2 margin: 0; 3 } 4 .wrap{ 5 line-height: 400px; 6 text-align:center; 7 8 height: 400px; 9 font-size: 36px; 10 background-color: #ccc; 11 } 2.利用盒模型的水平垂直居中 我们一般讲的盒模型都是说的块级盒的盒模型，也只有块级盒的盒模型用得多一点，块级盒block-level box又是分别由content-box、padding-box、border-box、margin-box组成的，如下图： 用css3的calc()动态计算: 1 <div class="wrap"> 2 <div class="content"></div> 3 </div> 1 .wrap{ 2 margin-top: 20px; 3 margin-left: auto; 4 margin-right: auto; 5 width: 400px; 6 height: 400px; 7 background-color: #ccc; 8 .content{ 9 padding

文章目录 居中布局 水平居中布局 text-align+inline-block table+margin absolute+transform 垂直居中布局 table-cell+vertical-align absolute+transform 居中布局 table-cell+margin+vertical-align absolute+translate 多列布局 两列布局 float+margin float+overflow table+table-cell 三列布局 圣杯布局 双飞翼布局 等分布局 float实现 table实现 等高布局 使用table 使用padding+margin (伪等高布局) 多列布局 全屏布局 全屏布局 css相关知识 实用属性 盒子模型 格式化上下文（Formatting Contexts即FC） BFC IFC GFC FFC 区分概念 居中布局 水平居中布局 text-align+inline-block < div class = ' parent ' > < div class = ' child ' > </ div > </ div > < style > .parent { width : 100% ; height : 200px ; text-align : center ; } .child { width :

前面的话   margin是盒模型几个属性中一个非常特殊的属性。简单举几个例子：只有margin不显示当前元素背景，只有margin可以设置为负值，margin和宽高支持auto，以及margin具有非常奇怪的重叠特性。之前的博文中已经分别详细地介绍了 margin的基础知识 和 负margin的详细用法 。本文将详细介绍外边距margin的几个重点部分，包括重叠、auto和无效情况 重叠 【前提】   margin重叠又叫margin合并，发生这种情况有两个前提   1、只发生在block元素上(不包括float、absolute、inline-block元素)   2、只发生在垂直方向上(不考虑writing-mode) 【分类】   margin重叠共包括以下3种情况 1、相邻的兄弟元素 <style> p{ line-height: 2em; margin:1em 0; background-color: lightblue; display:inline-block; width: 100%; } </style> <p>兄弟一</p> <p>兄弟二</p> 2、父级元素和第一个或最后一个子元素，父子级的margin重叠又叫margin传递 <style> .box{ background-color: pink; height:30px; } .inner{

1.BFC BFC的英文全称是block formatting context，即格式化上下文，当元素触发BFC时会变成一个独立的环境。这里列举一个触发BFC的方法，在父级元素加入overflow:hidden;其适用场景有：(1)为父级找高(2)子级margin-top将父级一起往下带(3)兄弟级元素浮动后影响其他元素，将受影响的元素触发BFC变成独立环境 2.可以触发BFC的元素： (1)根元素 (2)float (3)overflow:auto.scroll.hidden (4)display:flex.table-cell.table-caption.inline-block.inline-flex (5)position:absolute.fixed.relative 3.块级元素水平垂直居中方法 (1) 未知块级元素的宽高：给父级元素设置display:flex;align-items:center(垂直居中);justify-content:center(水平居中); (2) 已知块级元素的宽高：给父元素设置position:relative;子元素设置position:absolute;top:50%;left:50%;margin-top:-hight/2;margin-left:-width/2; (3) 已知块级元素的宽高：给子元素设置position