css-实现元素垂直居中对齐-阿里云开发者社区

开发者社区> 云原生> 正文

css-实现元素垂直居中对齐

简介: 原文:css-实现元素垂直居中对齐  css-实现元素/元素内容,垂直居中对齐 一、单行内容的垂直居中(line-height:行高方法) 只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height 和 height,并使两值相等,就可以了。
原文:css-实现元素垂直居中对齐

 css-实现元素/元素内容,垂直居中对齐

一、单行内容的垂直居中(line-height:行高方法)

只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height 和 height,并使两值相等,就可以了。

缺点:1:这种方法局限性太大,只有单行文本的元素才适用,所以在多行元素中是不能使用这种方法的了。
         2 :IE中不支持<img>等的居中。

优点:适合在所有浏览器,没有足够空间时,内容不会被切掉,同时支持块级和内联元素

   但是这种方法对运用在小元素上是非常有用的,比如说让一个button、或者单行文本字段。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.middle-demo-1{
    background-color:#f1f1f1;
    height: 30px;
    line-height: 30px;
}
</style>
</head>
<body>
    <div class="middle-demo-1">
         css实现元素
    </div>
</body>
</html>

 

二、多行内容垂直居中,且容器高度可变:(padding:内边距方法)

也很简单,给出一致的 padding-bottom 和 padding-top 就行
优点:
1. 同时支持块级和内联极元素
2. 支持非文本内容
3. 支持所有浏览器
缺点:容器不能固定高度

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.middle-demo-1{    
    padding-top: 24px;
    padding-bottom: 24px;
}
</style>
</head>
<body>
    <div class="middle-demo-2">
         css实现元素
    </div>
</body>
</html>

 

 

三、把容器当作表格单元

CSS 提供一系列diplay属性值,包括 display: table, display: table-row, display: table-cell 等,能把元素当作表格单元来显示。

这是再加上 vertical-align: middle, 就和表格中的 valign="center" 一样了。
缺点:IE低版本不支持这些属性。如果需要兼容ie6,7,需要使用Hack
要注意的是:和一个合法的<td>元素必须在<table>里一样,display: table-cell 元素必须作为 display: table 的元素的子孙出现。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.middle-demo-3{
display: table-cell;
height: 100px;
vertical-align: middle;
background-color: #f1f1f1;
}
</style>
</head>
<body>
    <div class="middle-demo-3">
         css实现元素
    </div>
</body>
</html>

 

 

四、已知宽高块元素的水平垂直居中

绝对定位50%,margin负值

缺点:由于固定死元素的高度,致使没有足哆的空间,当内容超过容器的大小时,要么会消息,要么会出现滚动条(如果元素在body内,当用户缩小浏览器窗口时,body的滚动条将不会出现)。 

注意:其一元素定位关系到一个相对定位参考,所以要保证元素是相对于哪个为参考坐标;

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.middle-demo-4{
    background-color: red;
    width: 200px;/*元素的宽度*/
    height:200px;/*元素的高度*/
    position: absolute;
    left: 50%;/*配合margin-left的负值实现水平居中*/
    margin-left: -100px;/*值的大小等于元素宽度的一半*/
    top:50%;/*配合margin-top的负值实现垂直居中*/
    margin-top: -100px;/*值的大小等于元素高度的一半*/
}

</style>
</head>
<body>
    <div class="middle-demo-4">css元素本身水平垂直居中对齐,而不是其元素内容,主意区分</div>
</body>
</html>

 

 

 五:全兼容的水平垂直居中实例(原文:http://demo.doyoe.com/css/alignment/),

 1:vertical-align 只应用于inline level, inline-block level 及 table-cells 元素上;其次 vertical-align 的对齐就基于每个 line box(行框)的。

    简单的说,inline level元素按照 Normal flow 水平排版出一行就会形成一个line box,其高度由内容形成,如果换行,则又是另一个line box,所有一段文本可能会分布在多个line box里,这些不重叠的line box被称作为a vertical stack of line boxes(一个垂直堆叠的线框集合)这些。

2: 换句话说,我们的垂直居中是要在每个line box中进行处理。
    而上例中我们想让一行文本在名叫demo的高100px的容器里垂直居中,这时有个问题就是demo容器并非 该行文本的line box,所以就算定
   
    vertical-laign为middle也无法让该行文本在demo容器中垂直居中。

    我们知道line box的高度是由内容形成的,这时我们可以额外创建一个与该行文本处于同一line box的元素,同时将新增元素的高度定义为与demo容器相同,此时line box的高度将与demo一致,文本将会在line box内垂直居中 即同样实现了在demo容器中垂直居中。本例我们使用伪对象::after来创建那个新增元素,可以设置新增元    素为不可见。

3:由于IE8以下浏览器不支持伪对象::after,于是我们通过IE条件注释为IE8以下浏览器新增一个额外元素span,其作用等同 inline-block #5 中的::after。本例支持所有主浏览器。

4:由于ie6,7下不支持display:inline-block,

  IE6 中 inline 元素只要触发了 hasLayout 其表现就类似于 inline-block,这里设置 display:inline-block; 或者 zoom:1; 等其他属性值可以触发 hasLayout 

     表现出来是一样的。

5:display:inline-block 后的元素会产生水平空隙 font-size:0:解决间隙问题

 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#demo{
    height:100px;
    text-align:center;
    font-size:0;/*去除 inline-block 空隙*/
    background-color: red;
}
#demo:after,#demo span{
    display:inline-block;
    *display:inline;/*inline-block 兼容ie6,7*/
    *zoom:1;/*inline-block 兼容ie6,7*/
    width:0;
    height:100%;
    vertical-align:middle;
}
#demo:after{
    content:'';
}
#demo p{
    display:inline-block;
    *display:inline;/*inline-block 兼容ie6,7*/
    *zoom:1;/*inline-block 兼容ie6,7*/
    vertical-align:middle;
    font-size:16px;
}

</style>
</head>
<body>
    <div id="demo">
    <p>这是一个终极实现的水平垂直居中实例</p>
    <!--[if lt IE 8]><span></span><![endif]-->
</div
</body>
</html>

 

为了更加理解实现原理,这里贴出参照文和相关知识原理
原文参照:http://demo.doyoe.com/css/alignment/

inline-block的前世今生:http://www.iyunlu.com/view/css-xhtml/64.html   

未知高度多行文本垂直居中:http://iyunlu.com/view/css-xhtml/77.html

 

结语:我觉得以上5种方法在日常的工作中足够用了,而且实现原理简单,易于理解,如果不满足于以上的方法,可以看看以下链接的文章,不保证正确性,因为我觉得有部分小小的问题,大家看的时候好好斟酌啦,欢迎互相交流:

http://www.w3cplus.com/css/vertically-center-content-with-css

 

 

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
云原生
使用钉钉扫一扫加入圈子
+ 订阅

云原生时代,是开发者最好的时代

其他文章