欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

网页布局的居中问题，如何让文本居中，如何让div居中，怎样让div居中？居中都有哪几种情况？

程序员文章站 2022-03-25 14:55:25
...

关于网页设计制作（布局）过程中，如果让内容居中，分为以下几种情况：

1、文本，图片等内联元素的水平居中。text-align:center

2、定宽的块状元素在浏览器窗口或父容器中水平居中。margin：0 auto

3、不定宽块状元素水平居中

    方案一：给父元素添加display:table;将box转换为表格形式，将不定宽转换为定宽，然后设置左右margin为auto

   方案二：将子元素转换为内联块状元素，给父元素设置text-align:center;

4、不定宽高的元素在屏幕窗口水平垂直都居中

5、不定宽高元素在父元素中水平垂直都居中

-----------------------------以下为详细内容-------------------------------------------------

1、文本，图片等内联元素的水平居中。

       如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center;来实现的。

    如：

  1. <style type="text/css">
  2. .imgBox{
  3. border: 1px solid black;
  4. text-align: center;
  5. }
  6. h1{
  7. border: 1px solid black;
  8. text-align: center;
  9. }
  10. .menu{
  11. border: 1px solid black;
  12. text-align: center;
  13. }
  14. form{
  15. border: 1px solid black;
  16. text-align: center;
  17. }
  18. </style>
  19. </head>
  20. <body>
  21. <!-- 一张图片在父容器中水平居中 -->
  22. <div class="imgBox">
  23. <img src="img/pic2.png"/>
  24. <span style="background-color: red;">我是span</span>
  25. </div>
  26. <!-- 文本内容在父容器中水平居中 -->
  27. <h1>我是标题</h1>
  28. <!-- 内联元素在父容器中水平居中 -->
  29. <div class="menu">
  30. <a href="#">新闻资讯</a>
  31. <a href="#">课程介绍</a>
  32. <a href="#">关于我们</a>
  33. <a href="#">在线留言</a>
  34. <a href="#">师资力量</a>
  35. <a href="#">联系我们</a>
  36. </div>
  37. <form action="">
  38. <input type="text"/>
  39. <input type="submit" value="百度一下"/>
  40. </form>
  41. </body>
  42. </html>

2、定宽的块状元素在浏览器窗口或父容器中水平居中。margin：0 auto

  1. <style type="text/css">
  2. body,div,p,ol,ul,li,dl,dt,dd,form,table,tr,td,h1,h2,h3,h4,h5,h6,hr,figure,input,textarea{
  3. margin: 0;
  4. padding: 0;
  5. }
  6. .header{
  7. width: 100%;
  8. height: 100px;
  9. background: black;
  10. }
  11. .header_con{
  12. width: 1000px;
  13. height: 100px;
  14. background: red;
  15. margin:0 auto;
  16. }
  17. </style>
  18. </head>
  19. <body>
  20. <!-- 定宽块状元素在浏览器窗口或父容器中水平居中 -->
  21. <div class="header">
  22. <div class="header_con"></div>
  23. </div>
  24. <!-- 总结：满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的 -->
  25. </body>

3、不定宽块状元素水平居中

    方案一：给父元素添加display:table;将box转换为表格形式，将不定宽转换为定宽，然后设置左右margin为auto

  1. <style type="text/css">
  3. .box1{
  4. display: table;
  5. margin:0 auto;
  6. }
  7. .box1 a{
  8. display: block;
  9. float: left;
  10. padding:3px 5px;
  11. }
  13. </style>
  14. </head>
  15. <body>
  16. <!-- 网页中的分页效果，分页的页数不定，但是始终是居中的效果，如何实现？ -->
  17. <!-- 方案一：给父元素添加display:table;将box转换为表格形式，将不定宽转换为定宽，然后设置左右margin为auto -->
  18. <!-- 当我们随意改变a的数量时，会发现他们始终是居中的 -->
  19. <div class="box box1">
  20. <a href="#">首页1</a>
  21. <a href="#">上一页</a>
  22. <a href="#">1</a>
  23. <a href="#">2</a>
  24. <a href="#">3</a>
  25. <a href="#">4</a>
  26. <a href="#">5</a>
  27. <a href="#">下一页</a>
  28. <a href="#">尾页</a>
  29. </div>
  30. </body>
  31. </html>

方案二：

将子元素转换为内联块状元素，给父元素设置text-align:center;

  1. <style type="text/css">
  2. .box2{
  3. margin-top: 50px;
  4. text-align: center;
  5. }
  7. .box2 a{
  8. padding:3px 5px;
  9. border: 1px solid blue;
  10. margin:0 3px;
  11. text-decoration: none;
  12. color: #333;
  13. font-size: 12px;
  14. display: inline-block;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <!-- 网页中的分页效果，分页的页数不定，但是始终是居中的效果，如何实现？ -->
  21. <!-- 方案二：将a转换为内联块状元素，给父元素设置text-align:center; -->
  22. <div class="box box2">
  23. <a href="#">首页</a><a href="#">上一页</a><a href="#">1</a><a href="#">2</a><a href="#">3</a><a href="#">4</a><a href="#">5</a><a href="#">下一页</a><a href="#">尾页</a>
  24. </div>
  25. </body>
  26. </html>

4、不定宽高的元素在屏幕窗口水平垂直都居中

  1. <style type="text/css">
  2. /*body,div,p,ol,ul,li,dl,dt,dd,form,table,tr,td,h1,h2,h3,h4,h5,h6,hr,figure,input,textarea{
  3. margin: 0;
  4. padding: 0;
  5. }*/
  7. /*方案一：屏幕窗口的居中，使用固定定位，将四个方向的值全部设置为0，然后设置margin为auto，自动计算上下左右的margin值*/
  8. .imgs{
  9. position: fixed;
  10. left: 0;
  11. right: 0;
  12. top: 0;
  13. bottom: 0;
  14. margin:auto;
  15. }
  18. /*方案二*/
  19. /*使用弹性盒的方式实现，首先给html，body设置宽度为100%，然后给body设置主轴，交叉轴对齐方式为center*/
  20. /*html,body{
  21. height: 100%;
  22. }
  23. body{
  24. display: flex;
  25. justify-content: center;
  26. align-items: center;
  27. }*/
  29. /*方案三*/
  30. /*使用css3中transform变形中的translate来实现水平垂直都居中*/
  31. /*.imgs{
  32. position: fixed;
  33. left: 50%;
  34. top: 50%;
  35. transform: translate(-50%,-50%);
  36. }*/
  37. </style>
  38. </head>
  39. <body>
  40. <img class="imgs" src="img/pic2.png"/>
  41. </body>
  42. </html>


5、不定宽高元素在父元素中水平垂直都居中

  1. <style type="text/css">
  3. /*.father{
  4. width: 800px;
  5. height: 500px;
  6. background: gray;
  7. position: relative;
  8. }*/
  9. /*方案一：给父元素相对定位，给子元素绝对定位*/
  10. /*.imgs{
  11. position: absolute;
  12. left: 0;
  13. top: 0;
  14. right: 0;
  15. bottom: 0;
  16. margin: auto;
  17. }*/
  19. /*方案二：使用css3的translate实现*/
  21. /*.imgs{
  22. position: absolute;
  23. left: 50%;
  24. top: 50%;
  25. transform:translate(-50%,-50%);
  26. }*/
  28. /*方案三：非父元素设置table-cell,将父元素转换为表格单元格形式*/
  30. /*.father{
  31. width: 800px;
  32. height: 500px;
  33. background: gray;
  34. display: table-cell;
  35. text-align: center;
  36. vertical-align: middle;
  37. }
  38. .imgs{
  39. vertical-align: bottom;
  40. }*/
  42. /*方案四：给img添加一个参照物span，并设置高度为100%*/
  43. /*.father{
  44. width: 800px;
  45. height: 500px;
  46. background: gray;
  47. text-align: center;
  48. }
  49. .father span{
  50. display: inline-block;
  51. width: 0;
  52. height: 100%;
  53. vertical-align: middle;
  54. }
  55. .imgs{
  56. vertical-align: middle;
  57. }*/
  60. /*方案五：使用弹性盒的方式实现*/
  61. .father{
  62. width: 800px;
  63. height: 500px;
  64. background: gray;
  65. display: flex;
  66. justify-content: center;
  67. align-items: center;
  68. }
  69. </style>
  70. </head>
  71. <body>
  72. <div class="father">
  73. <img class="imgs" src="img/pic2.png"/>
  74. <!-- <span></span> -->
  75. </div>
  76. </body>
  77. </html>
相关标签： 布局

上一篇： Android补间动画之平移动画

下一篇： Android tween动画无限循环每个周期之后会停顿一段时间

推荐阅读