CSS多行文字垂直居中的两种方法-前端开发博客 最新文章
推荐文章 2242Views 719Views 2088Views 11766Views 1376Views热门文章
44,889Views
4,576Views
2,920Views
2,622Views
2,394Views
1,169Views百度推荐查看更多相关吗？百度搜索：css文字垂直居中css图片文字垂直居中css3 文字垂直居中css div 文字垂直居中css 多行文字垂直居中css让文字垂直居中css绝对定位实现居中的八种方式代码详解
原创
 09:29:54
482
绝对定位元素不在普通内容流中渲染，因此margin:auto可以使内容在通过top: 0; left: 0; bottom: 0;right: 0;设置的边界内垂直居中。居中方式：一、容器内（Within Container）内容块的父容器设置为position:relative，使用上述绝对居中方式，可以使内容居中显示于父容器。.Center-Container {
.Absolute-Center {
width: 50%;
height: 50%;
top: 0; left: 0; bottom: 0; right: 0;
}以下其余的demo默认上面的CSS样式已引用包括进去，在此基础上只提供额外的类供用户追加以实现不同的功能。二、视区内（Within Viewport）想让内容块一直停留在可视区域内？将内容块设置为position:并设置一个较大的z-index层叠属性值。.Absolute-Center.is-Fixed {
z-index: 999;
}注意：对MobileSafari，若内容块不是放在设置为position:的父容器中，内容块将垂直居中于整个文档，而不是可视区域内垂直居中。三、边栏 (Offsets)如果你要设置一个固顶的头或增加其他的边栏，只需要在内容块的样式中加入像这样的CSS样式代码：top:70bottom:由于已经声明了margin:，该内容块将会垂直居中于你通过top,left,bottom和right属性定义的边界框内。你可以将内容块固定与屏幕的左侧或右侧，并且保持内容块垂直居中。使用right:0;left:固定于屏幕右侧，使用left:0;right:固定与屏幕左侧。.Absolute-Center.is-Right {
left: right: 20
text-align:
.Absolute-Center.is-Left {
right: left: 20
text-align:
}四、响应式/自适应(Responsive)绝对居中最大的优势应该就是对百分比形式的宽高支持的非常完美。甚至min-width/max-width 和min-height/max-height这些属性在自适应盒子内的表现也和预期很一致。.Absolute-Center.is-Responsive {
width: 60%;
height: 60%;
min-width: 200
max-width: 400
padding: 40
}给内容块元素加上padding也不影响内容块元素的绝对居中实现。五、 溢出情况(Overflow)内容高度大于块元素或容器（视区viewport或设为position:relative的父容器）会溢出，这时内容可能会显示到块与容器的外面，或者被截断出现显示不全（分别对应内容块overflow属性设置为visible和hidden的表现）。加上overflow: auto会在内容高度超过容器高度的情况下给内容块显示滚动条而不越界。.Absolute-Center.is-Overflow {
}如果内容块自身不设置任何padding的话，可以设置max-height: 100%;来保证内容高度不超越容器高度。六、重绘(Resizing)你可以使用其他class类或javascript代码来重绘内容块同时保证居中，无须手动重新计算中心尺寸。当然，你也可以添加resize属性来让用户拖拽实现内容块的重绘。绝对居中（Absolute Centering）可以保证内容块始终居中，无论内容块是否重绘。可以通过设置min-/max-来根据自己需要限制内容块的大小，并防止内容溢出窗口/容器。.Absolute-Center.is-Resizable {
min-width: 20%;
max-width: 80%;
min-height: 20%;
max-height: 80%;
}如果不使用resize:both属性，可以使用CSS3动画属性transition来实现重绘的窗口之间平滑的过渡。一定要设置overflow:以防重绘的内容块尺寸小于内容的实际尺寸这种情况出现。绝对居中（AbsoluteCentering）是唯一支持resize:both属性实现垂直居中的技术。注意：要设置max-width/max-height属性来弥补内容块padding，否则可能溢出。手机浏览器和IE8-IE10浏览器不支持resize属性，所以如果对你来说，这部分用户体验很必要，务必保证对resizing你的用户有可行的退路。联合使用resize 和 transition属性会在用户重绘时，产生一个transition动画延迟时间。七、图片(Images)绝对居中（AbsoluteCentering）也适用于图片。对图片自身应用class类或CSS样式，并给图片添加height:auto样式，图片会自适应居中显示，如果外层容器可以resize则随着容器的重绘，图片也相应重绘，始终保持居中。需要注意的是height:auto虽然对图片居中有用，但如果是在图片外层的内容块上应用了height:auto则会产生一些问题：规则的内容块会被拉伸填充整个容器。这时，我们可以使用可变高度(Variable Height)方式解决这个问题。问题的原因可能是渲染图片时要计算图片高度，这就如同你自己定义了图片高度一样，浏览器得到了图片高度就不会像其他情况一样去解析margin:auto垂直居中了。所以我们最好对图片自身应用这些样式而不是父元素。HTML:&img src=&http://placekitten.com/g/500/200& class=&Absolute-Center is-Image& alt=&& /&CSS:.Absolute-Center.is-Image {
.Absolute-Center.is-Image img {
width: 100%;
}八、可变高度（Variable Height）这种情况下实现绝对居中（AbsoluteCentering）必须要声明一个高度，不管你是基于百分比的高度还是通过max-height控制的高度，还有，别忘了设置合适的overflow属性。对自适应/响应式情景，这种方法很不错。与声明高度效果相同的另一种方法是设置display:这样无论实际内容有多高，内容块都会保持居中。这种方法在一些浏览器（如IE/FireFox）上会有问题，我的搭档Kalley 在ELL Creative（访问ellcreative.com ）上写了一个基于Modernizr插件的检测函数，用来检测浏览器是否支持这种居中方法，进一步增强用户体验。Javascript：/* Modernizr Test for Variable Height Content */
Modernizr.testStyles('#modernizr { display: height: 50 width: 50 margin: position: top: 0; left: 0; bottom: 0; right: 0; }', function(elem, rule) {
Modernizr.addTest('absolutecentercontent', Math.round(window.innerHeight / 2 - 25) === elem.offsetTop);
});CSS：.absolutecentercontent .Absolute-Center.is-Variable {
}浏览器兼容性不太好，若Modernizr不能满足你的需求，你需要寻找其他方法解决。1.
与上述重绘(Resizing)情况的方法不兼容2.
Firefox/IE8:使用display:table会使内容块垂直居上，不过水平还是居中的。3.
IE9/10: 使用display:table会使内容块显示在容器左上角。4.
Mobile Safari:内容块垂直居中；若使用百分比宽度，水平方向居中会稍微偏离中心位置。以上就是css绝对定位实现居中的八种方式代码详解的详细内容，更多请关注php中文网其它相关文章！
江湖传言：PHP是世界上最好的编程语言。真的是这样吗？这个梗究竟是从哪来的？学会本课程，你就会明白了。
PHP中文网出品的PHP入门系统教学视频，完全从初学者的角度出发，绝不玩虚的，一切以实用、有用...
点击数(110036)
ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)－ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例，从最基本的框架常识开始，将...
点击数(107847)
《php.cn原创html5视频教程》课程特色：php中文网原创幽默段子系列课程，以恶搞，段子为主题风格的php视频教程！轻松的教学风格，简短的教学模式，让同学们在不知不觉中，学会了HTML知识。
点击数(82844)
本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。
点击数(82074)
所有计算机语言的学习都要从基础开始，《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术，是学习PHP必须掌握的内容，任何PHP项目的实现都离不开这部分的内容，通...
点击数(79236)
PHP开发工程师
文章总浏览数
相关视频章节&nbsp>&nbsp
&nbsp>&nbsp
&nbsp>&nbsp
html中div如何水平和垂直居中的几种css方法代码
摘要：一、记录下几种盒子居中的方法:1、margin固定宽高居中;2、负margin居中;3、绝对定位居中;4、table-cell居中;5、flex居中;6、transform居中;7、不确定宽高居中(绝对定位百分数);8、button居中。二、代码演示(html使用同一个Demo):htmlDemo:&body&&divid=&container&&&divid=&box&&&/div&&l
一、记录下几种盒子居中的方法:
1、margin固定宽高居中;
2、负margin居中;
3、绝对定位居中;
4、table-cell居中;
5、flex居中;
6、transform居中;
7、不确定宽高居中(绝对定位百分数);
8、button居中。
二、代码演示(html使用同一个Demo):
html Demo: &body& &div id=&container&& &div id=&box&&&/div& &/div&&/body&
1、margin固定宽高居中
这种定位方法纯粹是靠宽高和margin拼出来的,不是很灵活。
CSS: #container { width: 600 height: 500 border: 1px solid #000; margin:}#box { width: 200 height: 200 margin: 150px 200 background-color: #0}
2、负margin居中
利用负的margin来进行居中,需要知道固定宽高,限制比较大。
CSS: #container { position: width: 600 height: 500 border: 1px solid #000; margin:}#box { position: width: 200 height: 200 left: 50%; top: 50%; margin: -100px -100 background-color: #0}
3、绝对定位居中
利用绝对定位居中,非常常用的一种方法。
CSS: #container { position: width: 600 height: 500 border: 1px solid #000; margin:}#box { position: width: 200 height: 200 left: 0; top: 0; right: 0; bottom: 0; margin: background-color: #0}
4、table-cell居中
利用table-cell来控制垂直居中。
CSS: #container { display: table- width: 600 height: 500 vertical-align: border: 1px solid #000;}#box { width: 200 height: 200 margin: 0 background-color: #0}
5、flex居中
CSS3中引入的新布局方式,比较好用。缺点:IE9以及IE9一下不兼容。
CSS: #container { display: -webkit- display: -webkit-align-items: align-items: -webkit-justify-content: justify-content: width: 600 height: 500 border: 1px solid #000; margin:}#box { width: 200 height: 200 background-color: #0}
6、transform居中
这种方法灵活运用CSS中transform属性,较为新奇。缺点是IE9下不兼容。
CSS: #container { position: width: 600 height: 600 border: 1px solid #000; margin:}#box { position: top: 50%; left: 50%; width: 200 height: 200 transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); background-color: #0}
7、不确定宽高居中(绝对定位百分数)
这种不确定宽高的居中,较为灵活。只需要保证left和right的百分数一样就可以实现水平居中,保证top和bottom的百分数一样就可以实现垂直居中。
CSS: #container { position: width: 600 height: 500 border: 1px solid #000; margin:}#box { position: left: 30%; right: 30%; top: 25%; bottom: 25%; background-color: #0}
8、button居中
利用button做外容器,里边的块元素会自动垂直居中,只需要控制一下水平居中就可以达到效果。
HTML: &button& &div&&/div&&/button&
CSS: button { width: 600 height: 500 border: 1px solid #000;}div { width: 200 height: 200 margin: 0 background-color: #0}
以上是的内容，更多
的内容，请您使用右上方搜索功能获取相关信息。
若你要投稿、删除文章请联系邮箱：zixun-group@service.aliyun.com,工作人员会在五个工作日内给你回复。
新用户大礼包！
现在注册，免费体验40+云产品，及域名优惠！
云服务器 ECS
可弹性伸缩、安全稳定、简单易用
&40.8元/月起
预测未发生的攻击
&24元/月起
你可能还喜欢
你可能感兴趣
阿里云教程中心为您免费提供
html中div如何水平和垂直居中的几种css方法代码相关信息，包括
的信息，所有html中div如何水平和垂直居中的几种css方法代码相关内容均不代表阿里云的意见！投稿删除文章请联系邮箱：zixun-group@service.aliyun.com，工作人员会在五个工作日内答复
售前咨询热线
支持与服务
资源和社区
关注阿里云
Internationalcss标签水平垂直居中4种常用方法和适用场景介绍
标签的水平垂直居中，在面试及日常项目中非常常见，常用的4种方法如下：
方案一：已知标签宽高，标签绝对定位，4个方向的值均为0，并设置margin:注意：IE7及之前版本不支持；
方案二:已知标签宽高，使用负margin值，其值为标签宽度的负一半；
方案三：标签绝对定位，left与top值设置为50%，并做transform偏移-50%，-50%
方案四：父级转变为弹性盒子，主轴交叉轴居中对齐；
具体代码如下：
&!DOCTYPE html&
&meta charset=&utf-8& /&
&title&标签水平垂直居中&/title&
&style type=&text/css&&
.container {
width: 880
.wrapper {
margin: 10
width: 200
height: 200
background:
border-radius: 10
width: 100
height: 100
text-align:
line-height: 100
background:
border-radius: 5
/*方案一：已知标签宽高，标签绝对定位，4个方向的值均为0，并设置margin:注意：IE7及之前版本不支持*/
.wrapper1 {
.center1 {
bottom: 0;
/*方案二:已知标签宽高，使用负margin值，其值为标签宽度的负一半*/
.wrapper2 {
.center2 {
left: 50%;
margin-left: -50
margin-top: -50
/*方案三：标签绝对定位，left与top值设置为50%，并做transform偏移-50%，-50%*/
.wrapper3 {
.center3 {
left: 50%;
transform: translate(-50%, -50%);
/*方案四：父级转变为弹性盒子，主轴交叉轴居中对齐*/
.wrapper4 {
/*父级转变为弹性盒子*/
/*项目在主轴上的居中对齐*/
justify-content:
/*项目在交叉轴上居中对齐。*/
align-items:
.center4 {}
text-indent: 2
font-size: 18
word-spacing: 2
box-sizing: border-
padding: 20px 10
&p class=&container&&
&p class=&wrapper wrapper1&&
&p class=&center center1&&
&p class=&wrapper wrapper2&&
&p class=&center center2&&
&p class=&wrapper wrapper3&&
&p class=&center center3&&
&p class=&wrapper wrapper4&&
&p class=&center center4&&
&p class=&wrapper des&&
方案一：已知标签宽高，标签绝对定位，4个方向的值均为0，并设置margin:注意：IE7及之前版本不支持
&p class=&wrapper des&&
方案二:已知标签宽高，使用负margin值，其值为标签宽度的负一半
&p class=&wrapper des&&
方案三：标签绝对定位，left与top值设置为50%，并做transform偏移-50%，-50%
&p class=&wrapper des&&
方案四：父级转变为弹性盒子，主轴交叉轴居中对齐
效果图如下：
标签水平居中对齐为了账号安全，请及时绑定邮箱和手机
点击这里，将文章分享到自己的动态
css中常用的几种居中方法
在前端面试中，大都会问你div居中的方法：
文笔不好，就随便寥寥几句话概括了，希望大家能够轻拍
不过以后文笔肯定会变得更好一些的。
今天我们就细数一下几种方法：
1，使用position:absolute,设置left、top、margin-left、margin-top的属性
height:200
margin-top:-100
margin-left:-100
background:
这种方法基本浏览器都能够兼容，不足之处就是需要固定宽高。
2，使用position:fixed,同样设置left、top、margin-left、margin-top的属性
height:180
margin-top:-90
margin-left:-90
background:
大家都知道的position:fixed,IE是不支持这个属性的
3，利用position:fixed属性，margin:auto这个必须不要忘记了。
height:160
background:
4，利用position:absolute属性，设置top/bottom/right/left
height:140
background:
5，利用display:table-cell属性使内容垂直居中
display:table-
vertical-align:
text-align:
height:120
background:
6，最简单的一种使行内元素居中的方法，使用line-height属性
height:100
line-height:100
text-align:
background:
这种方法也很实用，比如使文字垂直居中对齐
7，使用css3的display:-webkit-box属性，再设置-webkit-box-pack:center/-webkit-box-align:center
display:-webkit-
-webkit-box-pack:
-webkit-box-align:
background:
8，使用css3的新属性transform:translate(x,y)属性
transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
background:
这个方法可以不需要设定固定的宽高，在移动端用的会比较多，在移动端css3兼容的比较好
9、最高大上的一种，使用:before元素
text-align:
background:rgba(0,0,0,.5);
.nine:before{
content:'';
display:inline-
vertical-align:
height:100%;
.nine .content{
display:inline-
vertical-align:
line-height:60
background:
这种方法在我的前面一片文章有详细的介绍：
若觉得本文不错，就分享一下吧！
评论加载中...
相关文章推荐
正在加载中
Web前端工程师
作者相关文章