css 盒子居中的几种方式

最新推荐文章于 2022-11-15 00:00:23 发布

我仰泳一级棒

最新推荐文章于 2022-11-15 00:00:23 发布

阅读量204

点赞数

分类专栏： css 文章标签： css3 css

本文链接：https://blog.csdn.net/like_js/article/details/116046999

版权

css 专栏收录该内容

1 篇文章

订阅专栏

壹:

position (定位方式)

父盒子设置:
position : relative

子盒子设置:
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin:auto

具体代码如下

<template>
  <div class="bigBox">
    <div class="smallBox"></div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.bigBox {
  margin: 0 auto;
  width: 600px;
  height: 600px;
  border: 2px solid red;
  position: relative;

  .smallBox {
    width: 200px;
    height: 200px;
    border: 2px solid skyblue;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
}
</style>

贰:

position(定位) + margin 负值

先用定位 top: 50%, left: 50%, 然后利用marin负值来移动子盒子的位置,将子盒子的自身的宽高剪掉一半(50%: 200的话就-100px)

代码如下

<template>
  <div class="bigBox">
    <div class="smallBox"></div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.bigBox {
  margin: 0 auto;
  width: 600px;
  height: 600px;
  border: 2px solid red;
  position: relative;

  .smallBox {
    width: 200px;
    height: 200px;
    border: 2px solid skyblue;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -100px;
    margin-left: -100px;
  }
}
</style>

叁:

position (定位) + css3 transform (位移属性)

与margin 负值异曲同工
代码如下

<template>
  <div class="bigBox">
    <div class="smallBox"></div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.bigBox {
  margin: 0 auto;
  width: 600px;
  height: 600px;
  border: 2px solid red;
  position: relative;

  .smallBox {
    width: 200px;
    height: 200px;
    border: 2px solid skyblue;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>

肆:

css属性 display: table-cell , vertical-align: middle

<template>
  <div class="bigBox">
    <div class="smallBox"></div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.bigBox {
  width: 600px;
  height: 600px;
  border: 2px solid red;
  display: table-cell;
  vertical-align: middle;

  .smallBox {
    width: 200px;
    height: 200px;
    border: 2px solid skyblue;
    margin: auto;
  }
}
</style>

伍:

弹性布局 : display:flex

父盒子设置:
justify-content: center
align-item: center

<template>
  <div class="bigBox">
    <div class="smallBox"></div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.bigBox {
  margin: 0 auto;
  width: 600px;
  height: 600px;
  border: 2px solid red;
  display: flex;
  justify-content: center;
  align-items: center;

  .smallBox {
    width: 200px;
    height: 200px;
    border: 2px solid skyblue;
  }
}
</style>