块级元素的三种垂直水平居中的方法

一生唯爱诗宝

直奔主题在这里提供三种块级元素垂直水平居中的方法

• flex（子级宽高可固定也可不固定，随意）
• 定位+margin（固定子级的宽高，margin-top,margin-left取自身一半的负值）
• 定位+transform（不固定子级的宽高）

flex

html

1. <div class="parent">
2. <div class="child"></div>
3. </div>

复制代码

css

1. .parent{
2. width: 500px;
3. height: 500px;
4. margin: 0 auto;
5. border: 1px solid gainsboro;
6. display: flex;
7. justify-content: center;
8. align-items: center;
9. }
10. .child{
11. width: 200px;
12. height: 200px;
13. background: red;
14. }

复制代码

定位+margin

html

1. <div class="parent">
2. <div class="child"></div>
3. </div>

复制代码

css

1. .parent{
2. position: relative;
3. width: 500px;
4. height: 500px;
5. margin: 0 auto;
6. border: 1px solid gainsboro;
7. }
8. .child{
9. position: absolute;
10. top: 50%;
11. left: 50%;
12. width: 200px;
13. height: 200px;
14. margin-left: -100px;
15. margin-top: -100px;
16. background: red;
17. }

复制代码

定位+transform

html

1. <div class="parent">
2. <div class="child">
3. <span>我是子元素</span>
4. </div>
5. </div>

复制代码

css

1. .parent{
2. position: relative;
3. width: 500px;
4. height: 500px;
5. margin: 0 auto;
6. border: 1px solid gainsboro;
7. }
8. .child{
9. position: absolute;
10. top: 50%;
11. left: 50%;
12. transform: translate(-50%,-50%);
13. background: red;
14. }

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持晓枫资讯。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

川中响马彰

顶顶更健康！！！

老男人新外套新z

感谢楼主分享。

123468137

路过，支持一下