您现在的位置是：网站首页> 编程资料编程资料

HTML对于元素水平垂直居中的探讨利用CSS3的flexbox实现水平垂直居中与三列等高布局Flexbox制作CSS布局实现水平垂直居中的简单实例浅析CSS实现水平垂直同时居中的5种思路让DIV水平垂直居中的两种完美方法推荐CSS解决页面图片水平垂直居中问题的方法全面总结使用CSS实现水平垂直居中效果的方法CSS定位“十字架”之水平垂直居中关于html水平垂直居中的问题小结DIV或者DIV里面的图片水平与垂直居中的方法

2023-10-09 392人已围观

简介 这篇文章主要针对HTML对于元素水平垂直居中进行的探讨，对元素水平垂直居中操作进行讲解，感兴趣的小伙伴们可以参考一下

我们在设计页面的时候，经常要把DIV居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。

到现在为止，探讨了很多种方法。

HTML：

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2.     <div class="maxbox">  
  3.         <div class="minbox align-center">div>  
  4.     div>  
  5. body>  
  6.   

效果图（下面几种方法效果图一样）：

第一种： CSS绝对定位

主要利用绝对定位，再用margin调整到中间位置。

父元素：

CSS Code复制内容到剪贴板
  1. .maxbox{   
  2.     position: relative;   
  3.     width: 500px;   
  4.     height: 500px;   
  5.     margin: 5px;   
  6.     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
  7. }   
  8.   

子元素：

CSS Code复制内容到剪贴板
  1. .minbox{   
  2.     width: 200px;   
  3.     height: 200px;   
  4.     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
  5. }  

水平垂直居中对齐：

CSS Code复制内容到剪贴板
  1. .align-center{   
  2.     position: absolute;   
  3.     left: 50%;   
  4.     top: 50%;   
  5.     margin-left: -100px;   /*width/-2*/  
  6.     margin-top: -100px;    /*height/-2*/  
  7. }   

第二种： CSS绝对定位 + Javascript/JQuery

主要利用绝对定位，再用Javascript/JQuery调整到中间位置。相比第一种方法，此方法提高了class的灵活性。

父元素：

CSS Code复制内容到剪贴板
  1. .maxbox{   
  2.     position: relative;   
  3.     width: 500px;   
  4.     height: 500px;   
  5.     margin: 5px;   
  6.     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
  7. }   
  8.   

子元素：

CSS Code复制内容到剪贴板
  1. .minbox{   
  2.     width: 200px;   
  3.     height: 200px;   
  4.     box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);   
  5. }  

水平垂直居中对齐：

CSS Code复制内容到剪贴板
  1. .align-center{   
  2.     position: absolute;   
  3.     left: 50%;   
  4.     top: 50%;   
  5. }   
  6.   

JQuery：

JavaScript Code复制内容到剪贴板

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网