精华内容
下载资源
问答
我要提问

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

     千次阅读 2018-06-27 14:46:27
    关于网页设计制作（布局）过程中，如果让内容居中，分为以下几种情况：1、文本，图片等内联元素的水平居中。text-align:center2、定宽的块状元素在浏览器窗口或父容器中水平居中。margin：0 auto3、不定宽块状元素... 
    关于网页设计制作（布局）过程中，如果让内容居中，分为以下几种情况：
    1、文本，图片等内联元素的水平居中。text-align:center
    2、定宽的块状元素在浏览器窗口或父容器中水平居中。margin：0 auto
    3、不定宽块状元素水平居中
        方案一：给父元素添加display:table;将box转换为表格形式，将不定宽转换为定宽，然后设置左右margin为auto
       方案二：将子元素转换为内联块状元素，给父元素设置text-align:center;

    4、不定宽高的元素在屏幕窗口水平垂直都居中
    5、不定宽高元素在父元素中水平垂直都居中
    -----------------------------以下为详细内容-------------------------------------------------
    1、文本，图片等内联元素的水平居中。
           如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center;来实现的。
        如：
    [html] view plain copy
    1. <style type="text/css">  
    2. .imgBox{  
    3. <span style="white-space:pre;"> </span>border: 1px solid black;  
    4. <span style="white-space:pre;"> </span>text-align: center;  
    5. }  
    6. h1{  
    7. <span style="white-space:pre;"> </span>border: 1px solid black;  
    8. <span style="white-space:pre;"> </span>text-align: center;  
    9. }  
    10. .menu{  
    11. <span style="white-space:pre;"> </span>border: 1px solid black;  
    12. <span style="white-space:pre;"> </span>text-align: center;  
    13. }  
    14. form{  
    15. <span style="white-space:pre;"> </span>border: 1px solid black;  
    16. <span style="white-space:pre;"> </span>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
    [html] view plain copy
    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
    [html] view plain copy
    1. <style type="text/css">  
    2.   
    3. .box1{  
    4.     display: table;  
    5.     margin:0 auto;  
    6. }  
    7. .box1 a{  
    8.     display: block;  
    9.     float: left;  
    10.     padding:3px 5px;  
    11. }  
    12.   
    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;
    [html] view plain copy
    1. <style type="text/css">  
    2. .box2{  
    3.     margin-top: 50px;  
    4.     text-align: center;  
    5. }  
    6.   
    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. <!-- 网页中的分页效果，分页的页数不定，但是始终是居中的效果，如何实现？ -->  
    20.   
    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、不定宽高的元素在屏幕窗口水平垂直都居中
    [html] view plain copy
    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.   
    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. }  
    16.   
    17.   
    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. }*/  
    28.   
    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、不定宽高元素在父元素中水平垂直都居中
    [html] view plain copy
    1. <style type="text/css">  
    2.   
    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. }*/  
    18.   
    19. /*方案二：使用css3的translate实现*/  
    20.   
    21. /*.imgs{  
    22.     position: absolute;  
    23.     left: 50%;  
    24.     top: 50%;  
    25.     transform:translate(-50%,-50%);  
    26. }*/  
    27.   
    28. /*方案三：非父元素设置table-cell,将父元素转换为表格单元格形式*/  
    29.   
    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. }*/  
    41.   
    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. }*/  
    58.   
    59.   
    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>  
    收起
    展开全文

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

     2018-07-06 20:53:26
    关于网页设计制作（布局）过程中，如果让内容居中，分为以下几种情况：1、文本，图片等内联元素的水平居中。text-align:center2、定宽的块状元素在浏览器窗口或父容器中水平居中。margin：0 auto3、不定宽块状元素... 
    关于网页设计制作（布局）过程中，如果让内容居中，分为以下几种情况：
    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">
    2.  
    3. .box1{
    4. 	display: table;
    5. 	margin:0 auto;
    6. }
    7. .box1 a{
    8. 	display: block;
    9. 	float: left;
    10. 	padding:3px 5px;
    11. }
    12.  
    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. }
    6.  
    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. <!-- 网页中的分页效果，分页的页数不定，但是始终是居中的效果，如何实现？ -->
    20.  
    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. }*/
    6.  
    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. }
    16.  
    17.  
    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. }*/
    28.  
    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">
    2.  
    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. }*/
    18.  
    19. /*方案二：使用css3的translate实现*/
    20.  
    21. /*.imgs{
    22. 	position: absolute;
    23. 	left: 50%;
    24. 	top: 50%;
    25. 	transform:translate(-50%,-50%);
    26. }*/
    27.  
    28. /*方案三：非父元素设置table-cell,将父元素转换为表格单元格形式*/
    29.  
    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. }*/
    41.  
    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. }*/
    58.  
    59.  
    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>
    78.
    收起
    展开全文
    布局

  • div内容居中_如何让表格的loading元素在可见区域居中

     2020-11-29 16:17:25
    如果只是让loading元素在表格内居中，那很容易，css就可以实现。但是可见区域内居中的话，loading就要fixed布局，这样loading的top值是动态变化的，下面看几张图片，就会一目了然了。loading在表格内居中。这是在... 
    
	
    

    这个问题的关键在于，loading在可见区域内居中。如果只是让loading元素在表格内居中，那很容易，css就可以实现。但是可见区域内居中的话，loading就要fixed布局，这样loading的top值是动态变化的，下面看几张图片，就会一目了然了。
    loading在表格内居中。
    99cfe241fa6db1a7bf1ea255aba3e0b4.png
    这是在表格内居中的loading，显而易见，当表格过长时，点击查询只能看到遮罩，而看不到loading。所以需要优化，优化的效果是在可视区内看到loading。
    loading在表格的可见区域内居中。当滚动的时候，也要保证loading实时居中。如下图所示：
    图一
    b0fcb84108ee3b054331bed597899d18.png
     																															图二
    4a7d09b2bd7e2428a8ccf159bfd8bb82.png
    图三
    e958e34434ac2db4adcad8cdb55cab7c.png
    从这三张图可以看出，loading的位置不是一直不变的，而是一直在表格的可视区域内居中的，
    怎么实现这种效果呢？
    这里用到javascript中的 getBoundingClientRect() 方法。
    Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
    <div class="table-wrap" id="table">        表格内容div>
    <script>    window.onload = function() {        let tableEle = document.getElementById("table");        let tableClientRect = tableEle.getBoundingClientRect();        console.log(tableClientRect);    }</script>// getBoundingClientRect()返回一个DOMRect对象。值如下：// DOMRect {x: 30, y: 160, width: 351.8374938964844, height: 2000, top: 160,bottom: 2160, left: 30,right: 381.8374938964844}
    getBoundingClientRect()   返回值有八个属性：left、top、right、bottom、x、y、width、height。
    left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。x、y表示元素左上角到页面上边和左边的距离。如图所示
    72e0a6550f5edac111b80fc4f540c24f.png
    用这个方法实现上面所说的在表格的可视区域内居中那就很简单了。
    大家可以试着自己实现一下。
    下面我贴出我的代码。
    <html lang="en"><head>    <meta charset="UTF-8">    <title>Documenttitle>    <style>        *{            margin: 0;            padding: 0;        }        .content-wrap{            width: 100%;            overflow-y: auto;        }        .search-wrap{            width: 30%;            height: 100px;            background: #417bff;            color: #fff;            text-align: center;            margin: 30px;        }        .table-wrap{            width: 30%;            height: 2000px;            background: #985ee4;            color: #fff;            text-align: center;            margin: 30px;            position: relative;        }        .loading-mark{            width: 100%;            height: 100%;            background: rgba(0,0,0,0.2);            position: absolute;            left:0;            top: 0;        }        /*相对于表格居中，当表格过长，loading可能看不见*/        /*.loading-text{            position: absolute;            top: 50%;            left: 50%;            transform: translate(-50%,-50%);        }*/        .loading-text{            position: fixed;            transform: translate(-50%,-50%);        }        .footer-wrap{            width: 30%;            height: 200px;            text-align: center;            background: #314B8C;            color: #fff;            margin: 30px;        }    style>head><body><div class="content-wrap" id="main">    <div class="search-wrap">查询区域div>    <div class="table-wrap" id="table">        表格内容        <div class="loading-mark">div>        <div class="loading-text" id="loading">loading...div>    div>    <div class="footer-wrap">        底部内容    div>div><script>    window.onload = function() {        let tableEle = document.getElementById("table");        let loadingEle = document.getElementById("loading");        let tableClientRect = tableEle.getBoundingClientRect();        let winH = document.documentElement.clientHeight;        document.getElementById("main").style.height = winH +'px';        //console.log(tableClientRect);        /*        * 用fiexd 布局，loading在表格可视范围内居中，left和top都需要计算。        * 初始进来页面时，也就是图一的状态        * */        loadingEle.style.top = (winH-tableClientRect.top)/2 + tableClientRect.top + 'px';        loadingEle.style.left = tableClientRect.width/2 + tableClientRect.left + 'px';        /*        * 滚动页面时        * */        document.getElementById("main").addEventListener('scroll',function() {            tableClientRect = tableEle.getBoundingClientRect();            // 滚动的时候，图一状态的loading的top值            if (tableClientRect.top>0 && tableClientRect.bottom>winH) {                loadingEle.style.top = (winH-tableClientRect.top)/2 + tableClientRect.top + 'px';            }            // 滚动的时候，图二状态的loading的top值            if (tableClientRect.top<0 && tableClientRect.bottom>winH) {                loadingEle.style.top = winH/2;            }            // 滚动的时候，图三状态的loading的top值            if (tableClientRect.top<0 && tableClientRect.bottom<winH) {                loadingEle.style.top =tableClientRect.bottom/2 + 'px';            }        });    }script>body>html>
    以上，只是一种情况，实际的项目场景中，刚进来的时候，表格还没有请求数据的时候，表格肯定是没有那么长的。那计算的方式也就不是上面图一的计算方式了。
     下面看图片，这样也很容易的知道，loading的top 应该是
    top = (tableClientRect.bottom - tableClientRect.top)/2 + tableClientRect.top;
    9427b1f262d57342859f0a633c46d8e0.png
    还有可能的情况是：进来页面的时候，表格没在可视区，这种情况也是要做处理的，否则可能在点击查询的时候没有看到表格却看到了loading。
    c791153e474a62453ac7e9a8edbba25b.png
    以上的这些情况，有兴趣的可以自己完整的实现一下。或者有不同做法的，欢迎评论区留言，一起讨论。
    收起
    展开全文

  • 如何让div中的内容垂直居中

     2015-11-26 22:42:22
    如何让div中的内容垂直居中 虽然Div布局已经基本上取代了表格布局，但表格布局和Div布局仍然各有千秋，互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项，不过好在千变万化的CSS可以灵活运用，可以制作出... 
    如何让div中的内容垂直居中
    

     
    

           虽然Div布局已经基本上取代了表格布局，但表格布局和Div布局仍然各有千秋，互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项，不过好在千变万化的CSS可以灵活运用，可以制作出准垂直居中效果，勉强过关。 要让div中的内容垂直居中，无非有以下几种方法，等我一一列举：
    

    

    一、行高（line-height）法
    
如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：
    

    p { height:30px; line-height:30px; width:100px; overflow:hidden; }
    
这段代码可以达到让文字在段落中垂直居中的效果。
    

    二、内边距（padding）法
    
另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如：
    

    p { padding:30px; }
    
这段代码的效果和line-height法差不多。
    

    三、模拟表格法
    
模拟表格法其实就是用CSS中对元素的声明让块元素像表格一样显示，用到的CSS属性有display、vertical-align等。 先看下面的Html代码：
    

    <div id="box"> <div id="content">居中显示</div> </div>
    
参照以上Html代码，让最外面名为box的Div呈表格样式显示，然后再让box中名为content的Div呈单元格显示，并利用vertical-align:middle让其垂直居中，这样就模拟出来和表格一样的显示方式，CSS代码如下：
    

    #wrap { height:400px; display:table; } #content { vertical-align:middle; display:table-cell; border:1px solid #FF0099; background:#000; width:400px; }
    
但这种方法有一个弊端，由于IE浏览器对高度理解会产生错误，所以这种方法仅对Firefox有效，对IE无效，既然这样，我们就需要找出对IE的修正方法，于是有了另外一种方法。
    

    四、定位法
    
顾名思义，定位法是利用CSS定位属性position对元素进行定位的方法，也属于模拟方法，不过它对IE的支持还是不错的。 它的Html代码为：
    

    <div id="box"> <div id="sub"> <div id="content">垂直居中</div> </div> </div>
    
这段代码比上一种方法中多出了一个名为sub的Div，它的作用是用来定位，原理就是：首先让box出于相对定位，sub相对box出于相对定位，位于box垂直方向的50%，再让content中的真正内容出于sub垂直方向的-50%，从而制作出content在box中垂直居中的效果，它们的CSS代码如下：
    

    #wrap { border:1px solid #000; background:#F00; width:400px; height:400px; position:relative; } #subwrap { position:absolute; top:50%; } #content { border:1px solid #000; position:relative; top:-50%; color:#FFF; }
    
这段代码无论是在IE中还是Firefox中，都能正常居中了
    

    
展开全文
    收起
    展开全文

  • java垂直居中_如何让div中的内容垂直居中

     2021-03-06 05:02:19
    虽然Div布局已经基本上取代了... 要让div中的内容垂直居中，无非有以下几种方法，等我一一列举：一、行高(line-height)法如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度... 
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    如何用DIV标签让内容居中显示出来
    
                                    
                                    
                                            千次阅读
                                    
                                2014-06-19 14:54:42
                            
    
                            
    
                                
    
                                    原文：如何用DIV标签让内容居中显示出来  HTML中看NanShan   即时通讯如何用DIV标签让内容居中显示出来  一、单行垂直居中  如果一个容器中只有一行文字，对它实现居中相对比较简单，我们只需要设置它的实际高度...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        html   
                                        性能   
                                        图片   
                                        国际化   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    bobo如何让div中的内容垂直居中
    
                                    
                                2019-10-04 09:01:45
                            
    
                            
    
                                
    
                                    虽然Div布局已经基本上取代了表格... 要让div中的内容垂直居中，无非有以下几种方法，等我一一列举：  一、行高（line-height）法如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    java文字垂直居中_如何让div中的内容垂直居中
    
                                    
                                2021-03-04 09:55:56
                            
    
                            
    
                                
    
                                    虽然Div布局已经基本上取代了... 要让div中的内容垂直居中，无非有以下几种方法，等我一一列举：一、行高(line-height)法如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    如何让div水平垂直居中
    
                                    
                                2015-08-19 18:06:00
                            
    
                            
    
                                
    
                                    如何让div水平垂直居中 @(css)[妙瞳] 引子 我们经常遇到需要把div中的内容进行水平和垂直居中。所以，这里介绍一种方法，可以使div水平居中和垂直居中。 代码： <!DOCTYPE html> <html lang="en"> <...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    如何让div中的内容垂直居中 
    
                                    
                                2015-06-10 18:09:12
                            
    
                            
    
                                
    
                                     虽然Div布局已经基本上取代... 要让div中的内容垂直居中，无非有以下几种方法，等我一一列举：  一、行高（line-height）法如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    [转]如何让div中的内容垂直居中
    
                                    
                                2015-11-08 21:10:00
                            
    
                            
    
                                
    
                                       虽然Div布局已经基本上取代了表格布局，但表格布局和Div布局仍然各有千秋，互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项，不过好在千变万化的CSS可以灵活... 要让div中的内容垂直居中，无非有以下几...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    纯CSS如何让图片以及DIV垂直居中显示
    
                                    
                                    
                                            万次阅读
                                    
                                2018-07-16 17:30:19
                            
    
                            
    
                                
    
                                    有时候我们会纠结于如何让这两种元素在父容器DIV中垂直居中显示（当然 ，这里我们抛开表格布局不谈，因为表格可以让内容自动垂直居中）     1. 对于图片，如下所示：           .container{ ...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    
                                
    
                                    
                                        css   
                                        图片   
                                
    

                        
    • 
                        
  • 
                            
    
                                
                                    
    使用 margin 让div块内容居中
    
                                    
                                2016-12-11 21:40:00
                            
    
                            
    
                                
    
                                    问：有一个div块，其width为300px，如何设置margin让div块居中显示？  答：margin设置为 margin：0 auto，即div块的上下外边距设置为 0 ， 左右外边距设置为 自动 auto。     <style>   div{   width:300px;  ...
                                
    
                                
    
                                    
    
                                        
    
                                    
    
                                    
    收起 
    
                                
    
                            
    

                        
    • 
                

            


            

                

                

                    
                    
空空如也

                

            


            

                

                

                    
                    
空空如也

                

            


            

                


 

 
 
         

            
                     


                    
                        1 
                    
                    
                        2 
                    
                    
                        3 
                    
                    
                        4 
                    
                    
                        5 
                    
                    
                        6 
                    

                    
            
        

   

                

                

            


        

    

    

        

            

                收藏数
                    113
            

            

                精华内容
                    45
            

        

        

            
热门标签

            
        


        


        

            关键字：
如何让div内容居中