文字在div中垂直居中(div让文字垂直居中)

常见的几种CSS水平垂直居中解决办法_html/css_WEB-ITnose

用CSS实现元素的水平居中，比较简单，可以设置text-align center，或者设置 margin-left:auto; margin-right:auto 之类的即可。

文字在div中垂直居中(div让文字垂直居中)

文字在div中垂直居中(div让文字垂直居中)

主要麻烦的地方还是在垂直居中的处理上，所以接下来主要考虑垂直方向上的居中实现。

水平垂直居中主要包括三类：基本文本类，图像类，其他元素类

但，也是由一些方法可以实现的，下面就来谈谈了解到的10中方法。

方法一、使用 line-height 这种方式更多地用在 单行文字的情况,其中使用overflow:hidden的设置是为了防止内容超出容器或者产生自动换行，这样就达不到垂直居中效果了

html,body,div {margin: 0;padding: 0} .box { margin: 20px auto; width: 200px; height: 200px; background: #ddf; } .content { line-height: 200px; text-align: center; overflow: hidden; } This is text

单行文字的情况各浏览器都能兼容，多行文字就需要考虑其他方法了。

但如果是，IE6以上可以正常居中，以下（包括IE6）则不兼容。

（如果想通过行高让在块元素内垂直居中，ie6无效果，因为ie6中含有替换元素的行高会失效。）

二、使用 vertical-align 加上这个属性，不过line-height也不能丢

如果不加上那个line-height的属性的话，div会认为你vertical-align的是默认高度，而不是自定义设置的高度。

跟上述一样，IE6的还是有问题

使用display:table和display:table-cell的方法，前者必须设置在父元素上，后者必须设置在子元素上，因此我们要为需要的文本再增加一个元素：

html,body,div {margin: 0;padding: 0} .box { margin: 20px auto; display: table; width: 200px; height: 200px; background: #ddf; } .content { display: table-cell; vertical-align: middle; text-align: center; }This is test a b c d e f g h i j k a b c d e f g h i j k

多行文本能居中了，但IE6却还是老样子。的居中也同理。

四、IE6下的解决方案 IE6这么霸道..不过还是可以 以bug攻bug

在Internet Explorer 6及以下版本中，在高度的计算上存在着缺陷的。在Internet Explorer 6中对父元素进行后，如果再对子元素

进行百分比计算时，计算的基础似乎是有继承性的（如果的数值是数值没有这个问题，但是使用百分比计算的基础将不再是该元素的

高度，而从父元素继承来的高度）

比如这

如果我们对subwrap进行了/相对，那么content也会继承了这个这个属性，虽然它不会在页面中马上显示出来，但是如果再对content进

行相对的时候，你使用的分比将不再是content原有的高度。

例如，我们设定了subwrap的ition为top:40%，我们如果想使content的上边缘和wrap重合的话就必须设置top:-80%;

那么，如果我们设定subwrap的top:50%的话，我们必须使用-才能使content回到原来的位置上去，但是如果我们把content设不过块级元素就有点问题了，第二行开始就不会左右居中了置成-50%呢？

那么它就正好垂直居中了。所以我们可以使用这中方法来实现Internet Explorer 6中的垂直居中：

注意，要有三个层级才可以~ 喜欢hack的话就直接兼容进去了

html,body,div {margin: 0;padding: 0} .box { ition: relative; margin: 20px auto; display: table; width: 200px; height: 200px; background: #ddf; } .content { _ition: relative; _top:50%; display: table-cell; vertical-align: middle; text-align: center; } .content > div { _ition: relative; _top: -50%; } This is test a b c d e f g h i j k a b c d e f g h i j k

html,body,div {margin: 0;padding: 0} .box { ition: relative; margin: 20px auto; width: 200px; height: 200px; background: #ddf; } .content { ition: absolute; top:50%; left: 50%; margin-left: -60px; / (width + padding)/2 / margin-top: -50px; / (height + padding)/2 / padding: 10px; width: 100px; height: 80px; background: #abc; } This is test

六、css3中transform的使用 其实这种方式给负边距不多，原理也是拉回来，不过因为css3的关系，IE8以下（包括IE8）还不支持

使用 transform: translate(-50%,-50%)拉回来

html,body,div {margin: 0;padding: 0} .box { ition: relative; margin: 20px auto; width: 200px; height: 200px; background: #ddf; } .content { ition: absolute; top:50%; left: 50%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); padding: 10px; width: 100px; height: 80px; background: #abc; }

七、直接使用margin:auto 使用这个方式需要有一些知识 要了解

元素不在普通内容流中渲染，因此margin:auto可以使内容在通过top: 0; left: 0; bottom: 0;right: 0;设置的边界内垂直居中。

这样一来，就可以直接居中了，不过IE6还是不能兼容到

html,body,div {margin: 0;padding: 0} .box { ition: relative; margin: 20px auto; width: 200px; height: 200px; background: #ddf; } .content { ition: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 100px; height: 80px; background: #abc; } This is test

九、使用css3的Flex布局 Flex布局用法见 上文 flex对IE而言 IE10+ 才支持

比如我想让box中那几个div都水平垂直居中，只要简单设置一下即可。

html,body,div {margin: 0;padding: 0} .box { margin: 20px auto; padding: 10px; display: flex; display: -webkit-flex; flex-wrap: wrap; justify-content: center; / align-content: flex-start; / align-s: center; width: 200px; height: 200px; background: #ddf; } .content { width: 50px; height: 50px; border: 2px solid #adf; background: #abc; }

得到结果为左图，因为默认align-content是stretch已经完全撑开了，如果想得到右图连接在一起就 把上头的 注释取消即可

十、在 content 元素外插入一个 div 并设置此 div height:50%; margin-bottom: -(contentheight + padding)/2;。

比如content高度为100px,总padding为20px ，则margin-bottom: -60px 将content挤下去

html,body,div {margin: 0;padding: 0} .box { margin: 20px auto; width: 200px; height: 200px; background: #ddf; } .floater { height: 50%; margin-bottom: -60px; } .content { ition: relative; margin: 0 auto; padding: 10px; width: 100px; height: 100px; border: 2px solid #adf; background: #abc; }

当然，还有很多方法可以实现水平垂直居中，见到了再添加吧。

DIV中怎样才能使文字在正？就是水平垂直居中对齐，在框框的正

你好，文字外面 一定有一个容器，你把那个大的容器给定宽和高，然后就是让他垂直 和水平居中的问题了加属性：text-align:center;(水平居中)line-height:和高一样的参数;(垂直居中)，

div + css 垂直居中

可以用CSS样式来控制,用两个DIV,个放在最外层,设置其align=center,第二个DIV放在里层,设置它的宽度,并将其对齐方式设为左对齐,然后把其它元素放在第二个DIV内部

三、把容器当作表格单元 table可以设置vertical-align，自然能实现居中，所以我们可以模拟出一个table文字

文字对齐