各位老铁们，大家好，今天由我来为大家分享实现DIV水平居中的多种技巧解析，以及的相关问题知识，希望对大家有所帮助。如果可以帮助到大家，还望关注收藏下本站，您的支持是我们最大的动力，谢谢大家了哈，下面我们开始吧！
如果容器中只有一行文本，则将其居中相对简单。我们只需要将其实际高度设置为等于line-height的高度即可。
div{
高度：25px；
行高：25px；
溢出：隐藏；
}
这段代码非常简单。后面使用overflow:hidden的目的是为了防止内容超出容器或者自动换行，从而达不到垂直居中的效果。
垂直居中单行文本
正文{font-size:12px;font-family:tahoma;}
div{
高度：25px；
行高：25px；
背景颜色：#FFCCFF；
}
现在我们需要将此文本垂直居中！ 2.多行未知高度文本垂直居中
如果一段内容的高度是可变的，那么我们可以使用上一节提到的最后一种方法来实现水平居中，即设置padding，使得上下padding值相同。再说一次，这是一种“看起来”垂直居中的方式，它只是使文本
这只是一个完全填满的请求。您可以使用类似于以下的代码：div{
内边距：25px；
行高：30px；
}
优点：可以在任何浏览器上运行，而且代码很简单，但是这种方法的前提是容器的高度必须是可伸缩的。
3. 多行文本固定高度居中
CSS中的vertical-align属性仅适用于inline level、inline-block level和table-cells元素；其次，vertical-align的对齐是基于每个line box的。但是CSS中还有一个display属性可以模拟，所以我们可以利用这个属性来制作
模拟可以使用vertical-align。注意：使用display:table和display:table-cell时，前者必须设置在父元素上，后者必须设置在子元素上，所以我们需要为需要定位的文本再添加一个文本。
元素：#wrap {
显示：表；
宽度：100%；
背景颜色：#FFCCFF；
}
内容{
显示：表格单元格；
垂直对齐：中间；
高度：500px；
}
让我们看一个例子：
多行文本垂直居中
裹{
显示：表；
宽度：100%；
背景颜色：#FFCCFF；
}
内容{
显示：表格单元格；
垂直对齐：中间；
文本对齐：居中；
高度：400px；
}
现在我们需要将此文本垂直居中！
content可以动态改变高度（不需要在CSS中定义）。当换行空间不足时，内容不会被截断。
这种方法应该比较理想，但是效果只能在IE8及以上浏览器和非IE浏览器中看到。
参考链接
5.多行文本垂直和水平居中（宽度和高度未知）
内容{
位置：绝对；
顶部：50%；
剩余：50%；
变换：翻译(-50%,-50%);
}
使用transform:翻译（-50，-50）；
示例如下：
多行文本垂直居中
内容{
位置：绝对；
顶部：50%；
剩余：50%；
变换：翻译(-50%,-50%);
高度：400px；
宽度：400px；
背景颜色：#FFCCFF；
}
内容在这里
6. 固定宽度和高度的多行文本居中
内容{
背景：#ddd；
位置：绝对；
顶部：50%；
剩余：50%；
宽度：200px；
高度：100px；
边距-left:-100px；
边距-top:-50px；
/* 宽度的负一半*/
/* 高度的负一半*/
}
示例如下：
多行文本的固定高度居中
内容{
背景：#ddd；
位置：绝对；
顶部：50%；
剩余：50%；
宽度：200px；
高度：100px；
边距-left:-100px；
边距-top:-50px；
}
内容在这里
优点：适用于所有浏览器，无需嵌套标签
缺点：当空间不足时，内容会消失（类似于div在body内部，用户缩小浏览器窗口时滚动条不出现的情况）
7. 固定宽度和高度的多行文本居中
此方法使用具有固定宽度和高度的position:absolute div。该div设置为top:0;bottom:0;但因为它有固定的高度，所以实际上不能让顶部和底部之间的间距为0，所以margin:auto;将其居中。使用margin:auto 垂直居中块级元素很简单；
内容{
位置：绝对；
顶部：0；
底部：0；
剩余：0；
对：0；
边距：自动；
高度：240px；
宽度：70%；
}
示例如下：
多行文本的固定高度居中
内容{
位置：绝对；
顶部：0；
底部：0；
剩余：0；
对：0；
边距：自动；
高度：240px；
宽度：70%；
背景：#ddd；
}
内容在这里
优点：简单
缺点：在IE（IE8 beta）中无效；当空间不足时，内容会被截断，但不会出现滚动条。
参考链接
8. 将浮动元素居中
我想知道如何将浮动元素居中，但让我们展示代码并直接查看效果。
HTML:
中心中心中心中心中心中心中心中心
中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心
中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心中心
中心中心中心中心中心中心中心中心中心
CSS:裹{
浮动：左；
宽度：100%；
高度：400px；
背景颜色：#ccc;
}
.ele{
浮动：左；
位置：相对；
剩余：50%；
顶部：50%；
}
.ele-inner{
位置：相对；
剩余：-50%；
-webkit-transform:translate3d(0,-50%,0);
变换：translate3d(0,-50%,0);
背景颜色：#333;
颜色：#fff；
}
该方法的原理是先利用float属性将需要居中的元素的父元素.ele的宽度缩小，然后left:50%将.ele的左侧与水平中线对齐。此时尚未居中，需要向后移动。拉动自身宽度的50%，所以.ele-inner才是真正需要水平居中的元素。我给它一个position:relative，并将其拉回其自身宽度的50%。对于垂直方向，仍然是先将.ele top:50%移动到垂直方向的中点，但是这时候给.ele-inner top:50%就不行了，因为如果父元素没有给出明确的高度，这50%不会被计算。因此，有变换： translate3d(0, -50%, 0)。
这种方法的优点是元素可以具有可变的宽度并且可以随时居中。
缺点：当居中元素的父元素为left:50%时，如果元素宽度足够大，会超出外容器，而外容器如果恰好是overflow:auto，则会在外面产生滚动条。
9.内联块实现：未知大小的元素水平和垂直居中
CSS 探索之旅
inline-block的前世今生
10. 文本对齐：center + 绝对
text-aign:center不能直接作用于绝对元素，但是没有left或等价值的行级绝对元素会受到text的影响。
超文本标记语言
中心+绝对
CSS（少）。裹{
文本对齐：居中；
宽度：100%；
高度：400px；
背景颜色：#ccc;
字体大小：0；
}
.ele{
位置：绝对；
边距-left:-(100px/2);
边距-top:(400px-100px)/2;
宽度：100px；
高度：100px；
显示：内联块；
背景颜色：#333;
颜色：#fff；
字体大小：18px；
【实现DIV水平居中的多种技巧解析】相关文章：
用户评论
这个标题真贴心啊，页面布局一直是我最头疼的地方！
有19位网友表示赞同！
希望这些方法能让我摆脱左右两边的空白尴尬！
有14位网友表示赞同！
水平居中可是网页设计的基本功啊，还是要好好学习！
有18位网友表示赞同！
最近在做个网站，这篇文章正好帮到我了！
有15位网友表示赞同！
我尝试过很多方法，结果还是会偏左或偏右，不知道是哪个问题啦？
有15位网友表示赞同！
看了标题，感觉应该学一下css的技巧，才能达到完美的效果
有18位网友表示赞同！
我的页面总是怪怪的，估计是因为水平居中没做好吧！
有10位网友表示赞同！
这个标题让我眼前一亮，终于有人解决了我的难题了！
有16位网友表示赞同！
以前做网页都觉得麻烦，现在要好好学习一下这些方法啦。
有17位网友表示赞同！
我还在纠结怎样让文字正上中间呢？这篇文章真是太重要了！
有6位网友表示赞同！
分享这种干货总是很棒的！希望能详细讲解那些N种方法。
有17位网友表示赞同！
感觉这个标题好实用，以后应该收藏起来常常查阅。
有7位网友表示赞同！
水平居中看起来简单，但其实很多细节需要注意啊！
有6位网友表示赞同！
这篇文章一定能够帮我解决很多网页布局的问题！
有11位网友表示赞同！
页面美观很重要，水平居中就让整页风格更协调！
有5位网友表示赞同！
好希望能看到一些案例分析，这样更加直观易懂！
有10位网友表示赞同！
学习新知识总是让人兴奋！期待文章里的分享。
有9位网友表示赞同！
我的网页设计水平还很 amateur，这篇文章刚好可以充实经验！
有18位网友表示赞同！
看来学习网页开发还需要多加努力！这篇文章是一个很好的起点!
有16位网友表示赞同！