企业管理系统定制开发文本和盒子的水平 垂直居中 (18种方法)

目录

一、水平居中：

1、（子）父：text-align：center；（）

企业管理系统定制开发文本在盒子中水平居中：text-align：center； （用于inline、inline-block、inline-table、inline-flex）

2、（自己居中）自己：margin：0 auto；（）

企业管理系统定制开发盒子在父盒子中水平居中：margin：0 auto； （用于block）

3、（企业管理系统定制开发子元素居中）（子）display:inline-block;  （父）text-align：center； （多块级元素）

子元素们：display:inline-block;   父元素：text-align：center；   (如果一行中有两个及以上的块级元素，将父元素设text-align)

4、（子元素居中）（父）display：flex；justify-content:center; 

多块级元素水平居中：父元素：display：flex；justify-content:center; 

二、垂直居中：

1、（inline-  ）单行文本自己：line-hight：盒子高度；

2、利用表：

 3、flex换主轴的方式：父元素：display：flex；flex-direction:column;justify-content:center; 

4、精灵元素：在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐

  1.   <head>
  2.       <style>
  3.         .d1 {
  4.             width: 400px;
  5.             height: 400px;
  6.             background-color: red;
  7.             position: relative;
  8.         }
  9.         .d1::before {
  10.             content:"";
  11.             display: inline-block;
  12.             height: 100%;
  13.             width: 1%;
  14.             vertical-align: middle;
  15.         }
  16.         .d2 {
  17.             width: 100px;
  18.             height: 50px;
  19.             background-color: pink;
  20.             display: inline-block;
  21.             vertical-align: middle;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div class="d1">
  27.         <div class="d2">as</div>
  28.     </div>
  29. </body>

 5、（已知子元素高度）：绝对定位50%；margin-top：子元素高度的一半

子元素 绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半 （块级元素）

  1. <head>
  2.      <style>
  3.         .d1 {
  4.             width: 400px;
  5.             height: 400px;
  6.             background-color: red;
  7.             position: relative;
  8.         }
  9.         .d2 {
  10.             position: absolute;
  11.             width: 100px;
  12.             top:50%;
  13.             height: 100px;
  14.             margin-top:-50px;
  15.             background-color: pink;
  16.  
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21.     <div class="d1">
  22.         <div class="d2">as</div>
  23.     </div>
  24. </body>

 6、（子元素未知高度）：绝对定位50%；transform：子元素高度的50%

子元素 绝对定位元素距离顶部50%，并用transform属性向Y轴反向偏移50%（部分浏览器存在兼容性问题）

  1. <head>
  2.     <style>
  3.         .d1 {
  4.             width: 400px;
  5.             height: 400px;
  6.             background-color: red;
  7.             position: relative;
  8.         }
  9.         .d2 {
  10.             position: absolute;
  11.             width: 100px;
  12.             top:50%;
  13.             transform: translateY(-50%);
  14.             background-color: pink;
  15.  
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <div class="d1">
  21.         <div class="d2">as</div>
  22.     </div>
  23. </body>

三：水平垂直居中：

1、父相子绝 + margin   （已知子元素高度）：宽高各移一半

margin-left  和 margin-top  分别是宽高的一半

  1.         .fa {
  2.             width: 300px;
  3.             height: 200px;
  4.             border: 1px solid #000;
  5.             position: relative;
  6.         }
  7.         .son {
  8.             width: 100px;
  9.             height: 50px;
  10.             position: absolute;
  11.             left: 50%;
  12.             margin-left: -50px;
  13.             top: 50%;
  14.             margin-top: -25px;
  15.         }   
  16.  
  17.  
  18.     <div class="fa">
  19.         <div class="son"></div>
  20.     </div>

 2、父相子绝 + transform 移动  （未知子元素高度）

x和y轴各移动宽高的百分之50%

  1.  .div1 {
  2.             width: 500px;
  3.             height: 500px;
  4.             background-color: red;
  5.             position: relative;
  6.         }
  7.         .div2 {
  8.             height: 200px;
  9.             width: 200px;
  10.             background-color: blue;
  11.             position: absolute;
  12.             top: 50%;
  13.             left: 50%;
  14.             transform: translate(-50%, -50%);
  15.         }
  16.  
  17. <div class="div1">
  18.     <div class="div2">
  19.     </div>
  20. </div>
  21.

 3、利用flex，主/纵轴都设为center

  1.   .d1 {
  2.             width: 300px;
  3.             height: 200px;
  4.             border: 1px solid #000;
  5.             display: flex;
  6.             justify-content: center;  /*主轴 */
  7.             align-items: center;      /*纵轴 */
  8.         }
  9.         .d2 {
  10.             width: 100px;
  11.             height: 100px;
  12.             background-color: pink;
  13.         }
  14. <body>
  15.     <div class="d1">
  16.         <div class="d2">as</div>
  17.     </div>
  18. </body>

4、用flex：  弹性盒子+margin：auto；

  1.         .fa {
  2.             width: 300px;
  3.             height: 200px;
  4.             border: 1px solid #000;
  5.             display: flex;
  6.  
  7.         }
  8.         .son {
  9.             width: 20px;
  10.             height: 20px;
  11.             background-color: pink;
  12.             margin: auto;
  13.  
  14.         }
  15.     <div class="fa">
  16.         <div class="son"></div>
  17.     </div>

 5、屏幕上

此方法十分常用，常规的登录及注册页面都需要用到。要保证较好的兼容性，还需要用到表布局。

 

6、父相子绝 + margin: auto; 上下左右：0；

（如果子元素没有设置高度，那么子元素的高度会被拉伸至父元素的高度）

  1.        .fa {
  2.             width: 500px;
  3.             height: 500px;
  4.             background-color: purple;
  5.             position: relative;
  6.         }
  7.         .sn {
  8.             width: 300px;
  9.             height: 300px;
  10.             background-color: yellow;
  11.             position: absolute;
  12.             top: 0;
  13.             left: 0;
  14.             right: 0;
  15.             bottom: 0;
  16.             margin: auto;
  17.             （如果子元素没有设置高度，那么子元素的高度会被拉伸至父元素的高度）
  18.         }
  19.  
  20.     <div class="fa">
  21.         <div class="sn"></div>
  22.     </div>
  23.

7、padding+margin-top:（父height-子heigh）/2

  1.         .fa {
  2.             width: 500px;
  3.             height: 400px;
  4.             background-color: red;
  5.             box-sizing: border-box;
  6.             padding-top: 1px;   /*不写这个的话，无法垂直居中，因为父 子元素之间没有任何东西，会外边距合并，可以用padding-top和box来解决，更多解决方案在盒子模型里  */
  7.         }
  8.         .son {
  9.             width: 300px;
  10.             height: 200px;
  11.             background-color: blue;
  12.             margin: 0 auto;
  13.             margin-top: 100px;
  14.         }
  15.  
  16.     <div class="fa">
  17.         <div class="son"></div>
  18.

8、利用grid  （兼容性较差，不推荐）

  1. <head>
  2.     <style>
  3.         .d1 {
  4.             width: 300px;
  5.             height: 200px;
  6.             border: 1px solid #000;
  7.             display: grid;
  8.         }
  9.         .d2 {
  10.             width: 100px;
  11.             height: 100px;
  12.             background-color: pink;
  13.             margin: auto;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div class="d1">
  19.         <div class="d2">as</div>
  20.     </div>
  21. </body>

垂直水平居中：


1、position+tranform
.fa {
    positon:relative;
}
.son{
    position:absolute;
    left:50%;
    right:50%;
    transform:translate(-50%,-50%)
}

2、postion+margin:宽高各移一半
.fa{
    position:relative;
}
.son{
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-父元素宽度的一半px；
    margin-top:-父元素高度的一半px;
}

3、margin-top:（父height-子heigh）/2
.fa {
    box-sizing:border-box;
    padding-top:1px;
}
.son {
    margin:0 auto;
    margin-top:（父height-子heigh）/2

}


4、positon+margin
.fa{
    positon:relative;
}
.son{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    margin:auto;
}


5、flex
.fa {
    display:flex;
    justify-content:center;
    align-items:center;
}

6、flex+margin:auto
.fa {
    display:flex;
}
.son{
    margin:auto;
}
 

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发