第146篇：响应式动态居中（js+css,vue）

好家伙，

 

1.使用js原生

<div id="container" style="position: relative; width: 100%; height: 100vh;">
    <div id="hero" style="position: relative;"></div>
</div>

<script>
    const hero = document.getElementById('hero');
    const container = document.getElementById('container');

    hero.style.width = '100px';
    hero.style.height = '100px';
    hero.style.background = '#ffcc00';

    window.onload = function () {
        function update() {
            let heroX = hero.clientWidth;
            let heroY = hero.clientHeight;

            let containerX = container.clientWidth;
            let containerY = container.clientHeight;

            hero.style.left = (containerX - heroX) / 2 + 'px';
            hero.style.top = (containerY - heroY) / 2 + 'px';
        }

        update();
        window.addEventListener('resize', update);
    }
</script>

• window.onload: 当整个页面及其资源（包括图片、脚本、样式等）加载完成时，会执行 onload 内的代码。

• update 函数:

  • heroX 和 heroY 分别获取 hero 元素的当前宽度和高度。
  • containerX 和 containerY 分别获取 container 元素的当前宽度和高度。
  • hero.style.left 和 hero.style.top 分别设置 hero 的水平和垂直位置，通过计算将其居中。公式 (containerX - heroX) / 2 计算出 hero 左边缘到 container 左边缘的距离，使 hero 水平居中，类似地，(containerY - heroY) / 2 计算出 hero 上边缘到 container 上边缘的距离，使其垂直居中。

• update();: 初始调用 update 函数，确保页面加载时 hero 元素被正确居中。

• window.addEventListener('resize', update);: 添加窗口大小变化事件的监听器，每当浏览器窗口尺寸发生变化时，update 函数会被再次调用，重新计算并更新 hero 的位置，确保它始终在 container 中居中。

 

2.vue

在vue中使用计算属性实现

<template>
  <div :style="containerStyle">
    <div ref="content" :style="contentStyle">
      动态居中的内容
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      containerWidth: 0,
      containerHeight: 0,
      contentWidth: 0,
      contentHeight: 0,
    };
  },
  mounted() {
    // 在组件挂载时，获取容器和内容的尺寸
    this.updateDimensions();
    window.addEventListener('resize', this.updateDimensions);
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateDimensions);
  },
  computed: {
    containerStyle() {
      return {
        position: 'relative',
        width: '100%',
        height: '100vh',
      };
    },
    contentStyle() {
      return {
        position: 'absolute',
        top: `${(this.containerHeight - this.contentHeight) / 2}px`,
        left: `${(this.containerWidth - this.contentWidth) / 2}px`,
        backgroundColor: 'lightblue',
        padding: '20px',
      };
    },
  },
  methods: {
    updateDimensions() {
      // 更新容器的宽度和高度
      this.containerWidth = this.$el.clientWidth;
      this.containerHeight = this.$el.clientHeight;
      
      // 更新内容的宽度和高度
      const contentEl = this.$refs.content;
      this.contentWidth = contentEl.clientWidth;
      this.contentHeight = contentEl.clientHeight;
    },
  },
};
</script>

<style scoped>
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
</style>

通过计算属性计算出位置

 获取并更新容器的宽度和高度，使用 this.$el.clientWidth 和 this.$el.clientHeight 获取 container 的尺寸。