实现垂直居中和 vertical-align

最新推荐文章于 2024-04-19 22:04:59 发布

锅王

最新推荐文章于 2024-04-19 22:04:59 发布

阅读量1.2k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： css 文章标签：实现垂直居中 vertical-ali

本文链接：https://blog.youkuaiyun.com/qq_34099161/article/details/51491221

css 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了多种CSS技术实现元素垂直居中的方法，包括文本类居中、其他元素类居中等场景，通过不同技巧和代码示例展示了如何根据不同情况选择合适的垂直居中方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关于vertical：

1、定义和用法

vertical-align 属性设置该元素相对于所在行基线的垂直对齐方式。

只对行内元素（a，span，img等）的基线相对于该元素所在行的基线的垂直对齐（允许负值）。

2、实例列举

①

img标签的vertical-align: text-top

img标签的vertical-align: bottom

3、另一种用法：

在具有valign属性的表格元素（td、th）中，vertical-align等效于valign，规定单元格中内容的

垂直排列方式。

th,td{
width: 50px;
height: 50px;
vertical-align: bottom;
}

关于实现垂直居中的几种方式：

1、文本类居中

①单行文本居中：

如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度height和

所在行的高度line-height相等即可。

如：

div {
        height:25px;
        line-height:25px;
        overflow:hidden;
}

②未知行数的多行文本居中

如果一段内容，它的高度是可变的那么我们就可以使用设定Padding，使上下的padding值

相同即可。同样的，这也是一种“看起来”的垂直居中方式，它只不过是使文字把<div>完全

填充的一种访求而已。可以使用类似下面的代码：

div {
padding:25px;
}

③利用 vertical +line-height配合

.父元素{

lineheight:500px

}

.子元素{

display:inline-block;

vertical-align:middle

}

即可实现子元素在父元素line-height范围内的居中

2、其他元素类的居中

①需要居中的元素与父级元素大小相差不多：

利用margin-top和margin-left实现居中

②元素与父元素大小相差较大时：

利用position：50%居中，在利用负的 margin调整元素自身大小带来的偏差

③利用display修改框模型

利用修改display，模拟出 table中td、th等具有的valign垂直对齐属性，

父元素： display：table；

vertical-align：middle；

子元素： display：table-cell；

④利用绝对定位+margin：auto

.父元素{

position:relative;
width:1000px;
height:1000px;

}

.子元素{

margin:auto;
position:absolute;
left:0;
right:0;
top:0;
bottom:0;

}

⑤利用弹性盒模型

div{
	<span style="white-space:pre">	</span>display: -webkit-box;  /* 老版本语法: Safari,  iOS, Android browser, older WebKit browsers.  */  
            display: -moz-box;    /* 老版本语法: Firefox (buggy) */  
            display: -ms-flexbox;  /* 混合版本语法: IE 10 */  
            display: -webkit-flex;  /* 新版本语法： Chrome 21+ */  
            display: flex;       /* 新版本语法： Opera 12.1, Firefox 22+ */  
            /*垂直居中*/  
            /*老版本语法*/  
            -webkit-box-align: center;  
            -moz-box-align: center;  
            /*混合版本语法*/  
            -ms-flex-align: center;  
            /*新版本语法*/  
            -webkit-align-items: center;  
            align-items: center;  
            /*水平居中*/  
            /*老版本语法*/  
            -webkit-box-pack: center;  
            -moz-box-pack: center;  
            /*混合版本语法*/  
            -ms-flex-pack: center;  
            /*新版本语法*/  
            -webkit-justify-content: center;  
            justify-content: center;  
            margin: 0;  
            height: 700px;  
            width: 100% /* needed for Firefox */
			}