admin 管理员组文章数量: 887021
2024年2月23日发(作者:nginx代理rtsp)
css元素垂直居中的方法
CSS 元素垂直居中的方法
一、行内元素垂直居中
1、使用line-height
将元素的line-height设置为元素自身高度,这样文字就垂直居中了,代码如下:
div {
line-height: 20px; /* 元素高度 */
height:20px; /* 元素高度 */
}
2、使用vertical-align
可以将vertical-align属性设置为middle,这样元素就垂直居中了,代码如下:
div {
vertical-align: middle;
}
二、块级元素垂直居中
1、使用margin
将元素的margin设置成负值,需要同时设置top和bottom,使top负值等于bottom的负值,这样元素就垂直居中,代码如下:
div {
width:100px;
- 1 -
height:20px;
margin: -10px auto 0 auto;
}
2、使用position
将元素的position设置为absolute,并且将top和left设置为50%,同时使用transform设置-50%的margin,代码如下:
div {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width:100px;
height:20px;
}
3、使用flex
将元素的display设置为flex,并且设置align-items为center,这样元素就垂直居中了,代码如下:
div {
display: flex;
align-items: center;
width:100px;
height:20px;
- 2 -
}。
- 3 -
版权声明:本文标题:css元素垂直居中的方法 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.freenas.com.cn/jishu/1708637415h528377.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论