CSS文本和div垂直居中方法总结
(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun)
在样式布局中,我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单:对文本,只需要对其父级元素设置text-align: center;,而对div等块级元素,只需要设置其left和right的margin值为auto。要实现元素的垂直居中,有人会想到css中的vertical-align属性,但是它只对拥有valign特性的元素才生效,例如表格元素中的<td>、<th>、<caption>等,而像<div>、<span>这样的元素是没有valign特性的,因此使用vertical-align对它们不起作用。因此我们需要通过别的方法去实现元素的垂直居中,下面我总结了几种了常用垂直居中方法。
单行文本垂直居中
对于单行文本,我们只需要将文本行高(line-height)和所在区域高度(height)设为一致即可:
- <!--html代码-->
- <div id="div1">
- 这是单行文本垂直居中
- </div>
- /*css代码*/
- #div1{
- width: 300px;
- height: 100px;
- margin: 50px auto;
- border: 1px solid red;
- line-height: 100px; /*设置line-height与父级元素的height相等*/
- text-align: center; /*设置文本水平居中*/
- overflow: hidden; /*防止内容超出容器或者产生自动换行*/
- }
多行文本垂直居中
多行文本垂直居中分为两种情况,一个是父级元素高度不固定,随着内容变化;另一个是父级元素高度固定。
父级元素高度不固定
父级高度不固定的时,高度只能通过内部文本来撑开。这样,我们可以通过设置内填充(padding)的值来使文本看起来垂直居中,只需设置padding-top和padding-bottom的值相等:
- <!--html代码-->
- <div id="div1">
- 这是多行文本垂直居中,
- 这是多行文本垂直居中,
- 这是多行文本垂直居中,
- 这是多行文本垂直居中。
- </div>
- /*css代码*/
- #div1{
- width: 300px;
- margin: 50px auto;
- border: 1px solid red;
- text-align: center; /*设置文本水平居中*/
- padding: 50px 20px;
- }
父级元素高度固定
本文一开始就提到css中的vertical-align属性,但是它只对拥有valign特性的元素才生效,结合display: table;,可以使得div模拟table属性。因此我们可以设置父级div的display属性:display: table;;然后再添加一个div包含文本内容,设置其display:table-cell;和vertical-align:middle;。具体代码如下:
- <!--html代码-->
- <div id="outer">
- <div id="middle">
- 这是固定高度多行文本垂直居中,
- 这是固定高度多行文本垂直居中,
- 这是固定高度多行文本垂直居中,
- 这是固定高度多行文本垂直居中。
- </div>
- </div>
- /*css代码*/
- #outer{
- width: 400px;
- height: 200px;
- margin: 50px auto;
- border: 1px solid red;
- display: table;
- }
- #middle{
- display:table-cell;
- vertical-align:middle;
- text-align: center; /*设置文本水平居中*/
- width:100%;
- }
但是,在IE7中显示效果如下:
这是因为IE7及以下的版本并不能很好的支持display:table和display:table-cell属性,当然,如果你不考虑IE7以下的版本的浏览器,上述方法是可以实现垂直居中。如果把IE7及以下版本考虑进去,我们可以通过用到CSS hack的知识来设置针对不同浏览器的属性。
- <!--html代码-->
- <div id="outer">
- <div id="middle">
- <div id="content">
- 这是固定高度多行文本垂直居中(兼容IE7),
- 这是固定高度多行文本垂直居中(兼容IE7),
- 这是固定高度多行文本垂直居中(兼容IE7),
- 这是固定高度多行文本垂直居中(兼容IE7)。
- </div>
- </div>
- </div>
- /*css代码*/
- #outer{
- width: 400px;
- height: 200px;
- margin: 50px auto;
- border: 1px solid red;
- display: table;
- *position:relative; //兼容IE7及以下版本
- }
- #middle{
- display:table-cell;
- vertical-align:middle;
- text-align: center; /*设置文本水平居中*/
- width:100%;
- *position:absolute; //兼容IE7及以下版本
- *top:50%;
- }
- #content {
- *position:relative; //兼容IE7及以下版本
- *top:-50%;
- }
子div垂直居中
1、根据子div具体大小设置偏移
如果子div固定大小,设定水平和垂直偏移父元素的50%,再根据实际长度将子元素向上和向左挪回一半大小
- <!--html代码-->
- <div id="outer">
- <div id="middle">
- 子div(固定大小)垂直居中
- </div>
- </div>
- /*css代码*/
- #outer{
- background-color: #13CDF4;
- width: 300px;
- height: 200px;
- position: relative;
- }
- #middle{
- background-color: #E41627;
- width: 100px;
- height: 100px;
- margin: auto;
- position: absolute;
- left: 50%;
- top: 50%;
- margin-left: -50px;
- margin-top: -50px;
- }
该方法兼容IE7、IE6,但是只针对子div大小的固定的情况下才有效。大部分时候,子div的大小是不固定的,下面介绍子div大小不固定时的方法。由于显示效果与这个效果基本一样,效果图就不一一贴出来,读者可以自行复制代码验证。
2、利用translate
针对第一种方法中水平和垂直偏移父元素的50%后,不设置margin值,而是利用除css3中的transform属性设置translate的值,css代码部分改成如下:
- #middle{
- background-color: #E41627;
- width: 100px;
- height: 100px;
- margin: auto;
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translateX(-50%) translateY(-50%);
- -webkit-transform: translateX(-50%) translateY(-50%);
- }
这种方法需要注意transform是css3中的属性,使用时注意浏览器的兼容性,IE9之前的版本不支持。
3、利用绝对布局absolute
- <!--html代码-->
- <div id="outer">
- <div id="middle">
- 利用绝对定位实现子div大小不固定垂直居中
- </div>
- </div>
- /*css代码*/
- #outer{
- background-color: #13CDF4;
- width: 300px;
- height: 200px;
- position: relative;
- }
- #middle{
- background-color: #E41627;
- width: 100px; //子div大小可随意设置
- height: 100px;
- margin: auto;
- position: absolute;
- top: 0;left: 0;right: 0;bottom: 0;
- }
该方法不兼容IE7、IE6
4、利用vertical-align
- <!--html代码-->
- <div id="outer">
- <div id="middle">
- 利用vertical-align属性实现子div大小不固定垂直居中
- </div>
- </div>
- /*css代码*/
- #outer{
- background-color: #13CDF4;
- width: 300px;
- height: 200px;
- display: table-cell;
- vertical-align: middle;
- }
- #middle{
- background-color: #E41627;
- width: 100px;
- height: 100px;
- margin: 0 auto;
- }
这种方法是将div转变成table-cell显示,然后通过vertical-align: middle;再设置其子元素垂直居中,这种方法和上面设置父级元素高度固定时多行文本居中的方法一样,所以这种方法也不能兼容IE7、IE6。如果需要兼容IE7、IE6,可以参照上面的代码,上面设置父级元素高度固定时多行文本居中的方法其实就是将最里面的div垂直居中。这里我就不重述了。
5、利用display: flex
- <!--html代码-->
- <div id="outer">
- <div id="middle">
- 利用display: flex实现子div大小不固定垂直居中
- </div>
- </div>
- /*css代码*/
- #outer{
- background-color: #13CDF4;
- width: 300px;
- height: 200px;
- display: flex;
- justify-content: center;/*实现水平居中*/
- align-items:center; /*实现垂直居中*/
- }
- #middle{
- background-color: #E41627;
- width: 100px;
- height: 100px;
- }
这种方法只需要在父级div中加上这三句话就行,但是在IE中兼容性不好,IE9及以下IE浏览器版本都不支持。
以上是我总结的一些常用到的垂直居中的设计方法,大家可以根据自己的需要选择合适的设计方式。
原文链接:http://blog.csdn.net/u014607184/article/details/51820508
相关文章
- 这篇文章主要介绍了CSS水平垂直居中的几种方法总结,垂直居中是布局中十分常见的效果之一,本文介绍了几种方法,有兴趣的可以了解一下。2016-12-19
- 这篇文章主要为大家详细介绍了css让容器水平垂直居中的7种方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-10-17
- 这篇文章给大家介绍了三个小节的内容,其中包括关于css3中flexbox需要掌握的概念、flexbox实现水平垂直居中对齐和三列等高自适应页脚区域黏附底部的布局,有需要的可以参考2016-09-12
- 这篇文章给大家演示了在不知道高度的情况下图片如何垂直居中对齐,文中给出了实例代码,有需要的朋友们可以参考借鉴。下面来一起看看吧。2016-09-12
深入理解CSS行高line-height与文本垂直居中的原理
本文详细介绍了CSS行高属性line-height与文本垂直居中的原理,通过本文的介绍相信对大家以后使用line-height和设置文本垂直居中会更加熟练,有需要的可以参考借鉴。下面一2016-08-12- 下面小编就为大家带来一篇Flexbox制作CSS布局实现水平垂直居中的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-07-27
- 这篇文章主要为大家详细介绍了兼容IE浏览器CSS设置DIV垂直居中的N种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-07-05
- 下面小编就为大家带来一篇CSS 实现垂直居中的几种方法(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧2016-06-14
- 这篇文章主要介绍了CSS在固定宽高的div内实现垂直居中的实例详解,即在div内部元素相对于div垂直居中的方法,需要的朋友可以参考下2016-06-03
- 在前端布局过程中,我们实现水平居中比较简单,一般通过margin:0 auto;和父元素 text-align: center;就能实现。今天小编给大家带来了CSS实现垂直居中的几种方法小结,感兴2019-05-14
最新评论