- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

web前端学习分享-对实现元素居中的三种方法的分析

贾发表于 2021/09/26 23:12:26 2021/09/26

【摘要】对于一个已知宽高的元素来说，通过定位的方式，借助于元素宽高可以很容易的实现居中效果，本文要讨论的是在不借助元素宽高的情况下如何实现水平垂直居中。主要介绍三种方式：第一种方式是使用position+margin的方式实现，第二种是使用position+transform的方式实现，第三种是使用flex布局实现。接下来一一分析其实现原理。

对于一个已知宽高的元素来说，通过定位的方式，借助于元素宽高可以很容易的实现居中效果。本文要讨论的是在不借助元素宽高的情况下如何实现水平垂直居中。主要介绍三种方式：第一种方式是使用position+margin的方式实现，第二种是使用position+transform的方式实现，第三种是使用flex布局实现。接下来一一分析其实现原理。

<div class="box">
  <div class="box1"></div>
</div>

样式设置

.container{width: 300px; height: 300px;background-color: silver;}
.box{width: 100px;height: 100px;background-color: orange;}/*此处div.box的width和height是任意指定的*/

初始状态：

实现方式一：position+margin

首先内部的div.box需要能够移动起来，也就是需要相对于div.container进行绝对定位

第一步：实现水平居中

在开启定位之后，水平方向的布局需要满足等式：div的左右margin + 左右border + 左右padding + width + left + right = 包含块的内容区宽度

此时如果设置div.box的左右偏移量为0，左右margin为auto，就可以实现水平居中

第二步：实现垂直居中

垂直方向也需要满足等式 div的上下margin + 上下border + 上下padding + height + top + bottom = 包含块的内容区高度

此时如果设置div.box的上下偏移量为0，上下margin为auto，就可以实现垂直居中

整合一下上面的代码，也就是通过position+margin实现不知宽高的元素居中的方法了

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>通过position+margin的方式实现不知宽高的元素的居中</title>
   <style>
     .container{
       width: 300px; 
       height: 300px;
       background-color: silver;
       position: relative;
      }
     .box{
       width:100px;  /*任意设置*/
       height:100px;  /*任意设置*/
       background-color: orange;
       position: absolute;
       left:0;
       right:0;
       top: 0;
       bottom: 0;
       margin: auto;
      }
   </style>
 </head>
 <body>
   <div class="container">
     <div class="box"></div>
   </div>
 </body>
 </html>

注意：采用position+margin的方式实现居中虽然不要求知道元素的宽高大小，但是尺寸是要求固定的，如果尺寸是靠内容撑开的，width和height会被调整至最大。因为在margin，width、height都为auto的情况下，会优先调整width和height去分别满足垂直方向和水平方向的等式！