移动端水平垂直居中_盒子垂直水平居中方案

最新推荐文章于 2023-07-05 11:35:06 发布

米粒呢喃

最新推荐文章于 2023-07-05 11:35:06 发布

阅读量207

点赞数

文章标签：移动端水平垂直居中

本文链接：https://blog.csdn.net/weixin_42385265/article/details/112750746

版权

盒子垂直水平居中的需求在项目中可以说是非常常见的，我在开发过程中常用的以下几种方法：首先，做一下基础的布局：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 500px;
        height: 500px;
        background-color: lightblue;
      }

      .box {
        width: 100px;
        height: 100px;
        background-color: darkblue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

定位利用绝对定位使得盒子在父容器中水平垂直居中，是简单有效的方法，在实际开发中用的很多：

.container {
  position: relative;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -50px;
  margin-top: -50px;
}

但是这种方法在子元素宽高不确定的情况下就不适用了。由于 CSS3 的出现，有了适用性更广的方案：transform。

.container {
  position: relative;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

这种方法唯一的缺点是兼容性，不过现在大多数项目都不用考虑兼容性了（个人愚见）。基于定位，还有一种利用margin:auto的方法:

.container {
  position: relative;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

这种方法的前提是子元素必须有宽高。

2. flex flex是我在项目中用的最频繁的方法，逐渐取代了定位的方法，因为用起来太方便了，还不用考虑很多特殊情况，代码量也少。

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

3. table 布局 还有一种基本不用，但我在有些博客中看到的方法，就是 table 布局

.container {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}
.box {
  display: inline-block;
}

个人首推 flex 布局。

更多文章，参见github：tkiddo/front-end-interview

米粒呢喃

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端水平垂直居中_盒子垂直水平居中方案

盒子垂直水平居中的需求在项目中可以说是非常常见的，我在开发过程中常用的以下几种方法：首先，做一下基础的布局：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device...
复制链接

扫一扫