Print

css 实现移动端居中布局常见方式（面试题）

作者： 文章来源：

本文原地址：https://www.mimiwuqi.com/webqianduan/197388.html

目录文章目录
  1. 居中布局
  2. 结语

布局可不仅仅只是把数据整齐的罗列在页面上这么简单，一个合适的布局可以令用户的操作非常顺畅。同时在不同的场景下也应选择不同的布局，如果选错布局的话很可能会导致用户对页面的操作不那么的丝滑，哪怕最初呈现出来的数据都是一样的。

由于移动端的屏幕并不像电脑屏幕那么大，而且长宽比也有很大的区别，所以造就了移动端布局与 PC 端布局有着很大的不同，那么接下来我们就来看一下各式各样的常见布局。

居中布局

绝对定位实现

居中布局通常分为两种，一种是固定宽高，另一种是非固定宽高。

固定宽高很好理解，顾名思义就是宽高都写死。 而非固定宽高通常都是靠里面的内容来撑起盒子的高度，内容时多时少。

这两种方式也造就了不一样的技术实现，绝对定位法适合固定宽高：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 清除默认样式 */
    * { padding: 0; margin: 0; }

    /* 令 html 和 body 全屏显示, 并有一个灰色背景 */
    html, body { height: 100%; background: gray; }

    /* 先在父元素上设置相对定位 */
    body { position: relative } 

    .center {
      /* 绝对定位 */
      position: absolute;

      /* 上下左右全部为 0 */
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;

      /* 给定宽高 */
      width: 70%;
      height: 25%;

      /* 令外边距自动填充 */
      margin: auto;

      /* 白色背景 */
      background: white;
    }
  </style>
</head>
<body>
  <div ></div>
</body>
</html>

效果如下：
css 实现移动端居中布局常见方式（面试题） 1

此布局的关键点在于：

结语

看完这些有没有很郁闷，一个小小的居中布局都这么多种实现方式，而且这还不是全部的实现方式，我只挑了几款市面上常见的，可能大家会觉得有这个必要记这么多嘛！

其实这个问题就显得仁者见仁智者见智了，一方面面试造火箭，工作拧螺丝的现状让大家很苦恼。明明觉得自己技术还不错，至少公司要的都能给实现出来，但面试的时候面对面试官的刁难自己却无能为力。

以上就是今天为大家整理的关于移动端居中布局的多种实现方式，希望对大家有帮助，也许下一次面试时并不会遇到一个面试官让你以各种方式实现居中布局，但开拓一下眼界总是好的，因为变换一下思路有助于大家在遇见复杂布局的时候可以快速选型。

更多 建站教程 请访问 https://www.mimiwuqi.com/webqianduan/