应用CSS垂直居中波动元素的方式

日期:2021-03-05 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

方式1

设定器皿的波动方法为肯定精准定位
随后明确器皿的宽高 例如宽500 高 300 的层
随后设定层的外边距

CSS Code拷贝內容到剪贴板
  1.  div{   
  2.         width:500px;   
  3.         height:300px;   
  4.         margin:-150px 0 0 -250px;   
  5.         position:absolute;   
  6.         left:50%;   
  7.         top:50%;   
  8.         background-color:#000;   
  9. }  

方式2

父元素和子元素另外左波动,随后父元素相对性左挪动50%,再随后子元素相对性右挪动50%,或子元素相对性左挪动⑸0%也便可以了。

CSS Code拷贝內容到剪贴板
  1. <!DOCTYPE html><html><head>   
  2.     <title>Demo</title>   
  3.     <meta charset="utf⑻"/>   
  4.     <style type="text/css">   
  5.         .p{   
  6.             position:relative;   
  7.             left:50%;   
  8.             float:left;   
  9.         }   
  10.         .c{   
  11.             position:relative;   
  12.             float:left;   
  13.             rightright:50%;   
  14.         }   
  15.     </style></head><body>   
  16.     <div class="p">   
  17.         <h1 class="c">Test Float Element Center</h1>   
  18.     </div>   
  19. </body>   
  20. </html>  
上一篇:CSS注解的1些高級用法 返回下一篇:没有了