水平居中、垂直居中、水平垂直居中

2023-12-20 21:35:02

1.水平居中

1.1块级元素

text-align:center;

1.2块级元素

注意:需要给标签指定宽度

margin:0 auto;

1.3绝对定位 和 自我位移

position:absolute;
left:50%;
transform:translateX(-50%);

注意:使用绝对定位会使元素脱离文档流?

1.4flex布局

display: flex;
justify-content: center;

2.垂直居中

2.1设置行高和元素高度一致

height:2rem;
line-height:2rem;

2.2绝对定位 和 自我定位

position: absolute;
top: 50%;
transform: translateY(-50%);

2.3flex布局

display: flex;
align-items: center; 

2.4table布局

父元素:
display:table;
子元素:
display:table-cell;
vertical-align:middle;

3.水平垂直居中

3.1父相子绝定位 和 margin

父:
position:relative;
子:
position:absolute;
left:50%;
top:50%;
margin-left:-子元素宽的一半;
margin-right:-子元素高的一半;

3.2父相子绝定位 和 margin

父:
position:relative;
子:
position:absolute;
margin:auto;
top:0;
right:0;
bottom:0;
left:0;

3.3父相子绝 和 transform

父:
position:relative;
子:
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);

3.4弹性盒

display:flex;
justify-content:center;
align-items:center;

3.5table-cell

父元素:
display:table-cell;
vertical-align:middle;
text-align:center;

注意:对table-cell元素设置百分比的宽高值时(eg. width:20%)是无效的,但是可以将父元素设置display:table,再将父元素设置百分比宽高,子元素table-cell会自动撑满父元素。这就可以做相对于整个页面的水平垂直居中。

文章来源:https://blog.csdn.net/weixin_50632313/article/details/133296341
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。