当前位置:   article > 正文

如何使一个盒子水平垂直居中(常用的)

如何使一个盒子水平垂直居中(常用的)

目录

1. 使用Flex布局

 2. 使用Grid布局

3.绝对定位 + 负外边距  (必须知晓盒子的具体大小)

 4.绝对定位+外边距 auto 

 5.绝对定位 + transform   (无须知晓盒子的具体大小)


1. 使用Flex布局

如何实现:

在父元素上添加:

            display: flex;

            align-items: center;

            justify-content: center;

  1. <style>
  2. * {
  3. padding: 0;
  4. margin: 0;
  5. }
  6. .parent {
  7. display: flex;
  8. /* 水平居中 */
  9. justify-content: center;
  10. /* 垂直居中 */
  11. align-items: center;
  12. width: 500px;
  13. height: 500px;
  14. background-color: aqua;
  15. }
  16. .child {
  17. width: 200px;
  18. height: 200px;
  19. background-color: pink;
  20. }
  21. </style>
  22. <body>
  23. <div class="parent">
  24. <div class="child">我要水平垂直居中</div>
  25. </div>
  26. </body>

 2. 使用Grid布局

 如何实现:

在父元素上添加:

        display: grid;

        place-items: center;

  1. <style>
  2. * {
  3. padding: 0;
  4. margin: 0;
  5. }
  6. .parent {
  7. display: grid;
  8. /* 水平和垂直方向都居中对齐 */
  9. place-items: center;
  10. width: 500px;
  11. height: 500px;
  12. background-color: aqua;
  13. }
  14. .child {
  15. width: 200px;
  16. height: 200px;
  17. background-color: pink;
  18. }
  19. </style>
  20. <body>
  21. <div class="parent">
  22. <div class="child">我要水平垂直居中</div>
  23. </div>
  24. </body>

3.绝对定位 + 负外边距  (必须知晓盒子的具体大小)

相对父级上边和左边,或者下边和右边各移动50%,同时通过外边距减去自身的宽高各一半的大小。

如何实现:

在父元素上添加:

         position: relative;

在子元素上添加:

            position: absolute;

            top: 50%;

            left: 50%;

            margin-top: -100px;  //子元素高度的一半

            margin-left: -100px;  //子元素宽度的一半

 

  1. <style>
  2. * {
  3. padding: 0;
  4. margin: 0;
  5. }
  6. .parent {
  7. position: relative;
  8. width: 500px;
  9. height: 500px;
  10. background-color: aqua;
  11. }
  12. .child {
  13. position: absolute;
  14. top: 50%;
  15. left: 50%;
  16. margin-top: -100px;//子元素高度的一半
  17. margin-left: -100px;//子元素宽度的一半
  18. width: 200px;
  19. height: 200px;
  20. background-color: pink;
  21. }
  22. </style>
  23. <body>
  24. <div class="parent">
  25. <div class="child">我要水平垂直居中</div>
  26. </div>
  27. </body>

 4.绝对定位+外边距 auto 

将盒子的上下左右定位全部设置为0,同时设置外边距自适应

如何实现:

在父元素上添加:

         position: relative;

在子元素上添加:

            position: absolute;

            top: 0;

            bottom: 0;

            left: 0;

            right: 0;

            margin: auto;

  1. <style>
  2. * {
  3. padding: 0;
  4. margin: 0;
  5. }
  6. .parent {
  7. position: relative;
  8. width: 500px;
  9. height: 500px;
  10. background-color: aqua;
  11. }
  12. .child {
  13. position: absolute;
  14. top: 0;
  15. bottom: 0;
  16. left: 0;
  17. right: 0;
  18. margin: auto;
  19. width: 200px;
  20. height: 200px;
  21. background-color: pink;
  22. }
  23. </style>
  24. <body>
  25. <div class="parent">
  26. <div class="child">我要水平垂直居中</div>
  27. </div>
  28. </body>

 

 5.绝对定位 + transform   (无须知晓盒子的具体大小)

使用CSS3中的新属性transform: translate(-50%,-50%); 来直接减去盒子自身的50%大小

如何实现:

在父元素上添加:

         position: relative;

在子元素上添加:

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%,-50%);

  1. <style>
  2. * {
  3. padding: 0;
  4. margin: 0;
  5. }
  6. .parent {
  7. position: relative;
  8. width: 500px;
  9. height: 500px;
  10. background-color: aqua;
  11. }
  12. .child {
  13. position: absolute;
  14. top: 50%;
  15. left: 50%;
  16. transform: translate(-50%,-50%);
  17. width: 200px;
  18. height: 200px;
  19. background-color: pink;
  20. }
  21. </style>
  22. <body>
  23. <div class="parent">
  24. <div class="child">我要水平垂直居中</div>
  25. </div>
  26. </body>

 

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/小舞很执着/article/detail/821517
推荐阅读
相关标签
  

闽ICP备14008679号