经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
元素水平垂直居中的四种方法
来源:cnblogs  作者:以休伯利安的名义  时间:2021/2/22 8:40:37  对本文有异议

方法一:使用flex布局

将父元素的display属性设为flex、justify-content和align-items属性都设为center,可以让子元素在父元素内水平垂直居中显示。如果希望父元素覆盖整个浏览器视口,可以将父元素的高设置为100vh、宽设置为100vw(css3规定1vh等于视口高度的1%、1vw等于视口宽度的1%),这样子元素就会显示在页面的正中间。
示例

  1. <body>
  2. <div id="parent">
  3. <div id="children"></div>
  4. </div>
  5. <style>
  6. body{
  7. margin: 0;
  8. padding: 0;
  9. }
  10. #parent{
  11. display: flex;
  12. justify-content: center;
  13. align-items: center;
  14. width: 500px;
  15. height: 500px;
  16. background-color: #999;
  17. }
  18. #children{
  19. width: 50px;
  20. height: 50px;
  21. background-color: red;
  22. }
  23. </style>
  24. </body>

在这里插入图片描述
图1-子元素在父元素内水平垂直居中

  1. <style>
  2. body{
  3. margin: 0;
  4. padding: 0;
  5. }
  6. #parent{
  7. display: flex;
  8. justify-content: center;
  9. align-items: center;
  10. width: 100vw;
  11. height: 100vh;
  12. background-color: #999;
  13. }
  14. #children{
  15. width: 50px;
  16. height: 50px;
  17. background-color: red;
  18. }
  19. </style>

在这里插入图片描述
图2-子元素在整个页面内水平垂直居中

方法二:使用transform将元素进行移动,必要时可将margin设为负值(需要知道元素的尺寸)

通过transform属性的translate方法将子元素进行移动,这需要事先知道子元素和父元素的尺寸以计算出移动的距离。必要时(例如父元素与子元素宽高的单位不同不方便计算时)可以将子元素的margin设为负值,让子元素向左和向上方各移动其本身宽高的一半。
示例

  1. <style>
  2. body{
  3. margin: 0;
  4. padding: 0;
  5. }
  6. #parent{
  7. width: 500px;
  8. height: 500px;
  9. background-color: #999;
  10. }
  11. #children{
  12. width: 50px;
  13. height: 50px;
  14. background-color: red;
  15. transform: translate(225px,225px);
  16. }
  17. </style>

在这里插入图片描述
图3-已知父元素和子元素的具体尺寸,可以通过计算将子元素移动一定的距离使其恰好在父元素内水平垂直居中

  1. <style>
  2. body{
  3. margin: 0;
  4. padding: 0;
  5. }
  6. #parent{
  7. width: 100vw;
  8. height: 100vh;
  9. background-color: #999;
  10. overflow: hidden;
  11. }
  12. #children{
  13. width: 50px;
  14. height: 50px;
  15. background-color: red;
  16. transform: translate(50vw,50vh);
  17. margin-top: -25px;
  18. margin-left: -25px;
  19. }
  20. </style>

在这里插入图片描述
图4-父元素的宽高单位是vw和vh,只用transform进行移动的话不方便计算移动的距离,可以先移动50vw和50vh,再将子元素的margin设为负值实现水平垂直居中(给第一个子元素加margin-top,父元素会跟着移动,所以要在父元素上加上overflow: hidden,具体可参考我的另一篇博客:https://www.cnblogs.com/ljxlijiaxin/p/14297565.html

方法三:通过改变父元素和子元素的position属性实现居中效果

给父元素设置一个不为默认值的position属性,再将子元素的position属性设为fixed或absolute。然后将子元素的top、bottom、left、right属性都设为0,同时margin设为auto;或者将子元素的top、bottom、left、right属性都设为50%,不需要设置margin: auto,给子元素加上transform: translate(-50%,-50%)即可,这两种写法都能实现子元素在父元素内水平垂直居中。
示例

  1. <style>
  2. body{
  3. margin: 0;
  4. padding: 0;
  5. }
  6. #parent{
  7. width: 100vw;
  8. height: 100vh;
  9. background-color: #999;
  10. position: relative;
  11. }
  12. #children{
  13. width: 50px;
  14. height: 50px;
  15. background-color: red;
  16. position: absolute;
  17. top: 0;
  18. bottom: 0;
  19. left: 0;
  20. right: 0;
  21. margin: auto;
  22. }
  23. </style>
  1. <style>
  2. body{
  3. margin: 0;
  4. padding: 0;
  5. }
  6. #parent{
  7. width: 100vw;
  8. height: 100vh;
  9. background-color: #999;
  10. position: relative;
  11. }
  12. #children{
  13. width: 50px;
  14. height: 50px;
  15. background-color: red;
  16. position: absolute;
  17. top: 50%;
  18. bottom: 50%;
  19. left: 50%;
  20. right: 50%;
  21. transform: translate(-50%,-50%);
  22. }
  23. </style>

在这里插入图片描述
图5-上述两种写法都能实现子元素水平垂直居中

方法四:子元素设置display: inline-block,父元素设置text-align: center且line-height等于height

将子元素设为行内块元素,父元素设置左右居中,同时通过让父元素的line-height属性等于height属性实现子元素上下居中。
示例

  1. <style>
  2. body{
  3. margin: 0;
  4. padding: 0;
  5. }
  6. #parent{
  7. width: 100vw;
  8. height: 100vh;
  9. line-height: 100vh;
  10. background-color: #999;
  11. text-align: center;
  12. }
  13. #children{
  14. width: 50px;
  15. height: 50px;
  16. background-color: red;
  17. display: inline-block;
  18. }
  19. </style>

在这里插入图片描述
图6-将父元素的width设为100vw、height和line-height设为100vh,同样可以让子元素在页面上水平垂直居中

写在最后

以上为全部内容,感谢阅读。
本博文仅为学习记录和分享交流,如有错漏,还请帮忙指出,也欢迎更多补充,不胜感激。

CSDN地址:https://blog.csdn.net/m0_53610112.
GitHub地址:https://github.com/ljxlijiaxin.

原文链接:http://www.cnblogs.com/ljxlijiaxin/p/14420271.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号