本文详细介绍了CSS中实现元素水平垂直居中的多种方法，包括使用text-align、margin、position、flex布局等。每种方法都有其适用场景，如已知父元素宽高或未知尺寸的情况。通过这些技巧，开发者可以灵活地在网页设计中实现元素的精准居中对齐。
水平垂直居中
一、水平居中
- 父元素加text-align:center(父元素非块元素需加display:block)
- 父子都有各自的宽度，子加margin:0 auto;
- 父有宽度，子默认(无宽度)，子加display:inline-block或display:inline,给父设置text-align:center
- 父相对定位，子绝对定位，且left:50%,margin-left:-(子元素宽度的一半)px或transform:translate(-50%)
------解读为第一个left:50%为子元素在父元素宽度一半开始，transform的以自己宽度向左移动一半； - flex布局：父加display:flex;justify-content:center
二、垂直居中
- 单行行内元素：子与父设置相同height即可
- 多行行内元素：父加display:table-cell;vertical-align:middle
- 父相对定位，子绝对定位，且top:50%；margin-top:-(子元素高度的一半)px或transform:translate(-50%)
- flex布局：父display:flex;align-items:center
三、水平垂直居中(父宽高已给)
- 已知子高度宽度，父相对定位，子绝对定位加top:0;right:0;bottom:0;left:0;margin:auto
- 已知子高度宽度，父相对定位，子绝对定位加left:50%;top:50%;margin-left:-(子元素宽度的一半)px;margin-top:-(子元素高度的一半)px
- 未知子高度宽度，父相对定位，子绝对定位加left:50%;top:50%;transform:translateX(-50%) translateY(-50%)
- 未知子高度宽度，父display:flex;justify-content:center;align-items:center
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
