CSS垂直居中整理

原创已于 2023-03-20 17:36:01 修改 · 247 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #html

于 2023-03-14 10:47:32 首次发布

本文展示了在Vue.js组件中使用不同方法实现元素垂直居中的代码示例，包括弹性布局、定位、以及栅格布局。通过修改样式属性如align-items,justify-content,transform等，可以有效地将子元素在父元素内垂直居中显示。

一、基本布局代码以及页面展示

<template>
  <div class="father">
    <div class="son"></div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.father{
  width: 600px;
  height: 600px;
  margin: 0 auto;
  border: 2px #000 solid;
}
.son{
  width: 100px;
  height: 100px;
  background: bisque;
}
</style>

注：为防止内容冗余，下面仅进行实现代码的展示，而不进行页面的展示

二、实现元素的垂直居中

1.通过弹性布局实现

<template>
  <div class="father">
    <div class="son"></div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.father{
  width: 600px;
  height: 600px;
  margin: 0 auto;
  border: 2px #000 solid;
  display: flex;
  /* 更改弹性布局垂直方向布局 */
  align-items: center;
  /* 更改弹性布局水平方向布局 */
  justify-content: center;
}
.son{
  width: 100px;
  height: 100px;
  background: bisque;
}
</style>

2.通过定位实现

<template>
  <div class="father">
    <div class="son"></div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.father{
  width: 600px;
  height: 600px;
  margin: 0 auto;
  border: 2px #000 solid;
  position: relative;
}
.son{
  position: absolute;
  top: 50%;
  left: 50%;
  /* transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 */
  /* translate 定义2D转换基于元素本身上左位移——50% */
  transform: translate(-50%,-50%);
  width: 100px;
  height: 100px;
  background: bisque;
}
</style>

3.通过栅格布局实现

<template>
  <div class="father">
    <div class="son"></div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.father{
  width: 600px;
  height: 600px;
  margin: 0 auto;
  border: 2px #000 solid;
  display: grid;
  /* 栅格布局垂直排序 */
  align-items: center;
  /* 栅格布局水平排序 */
  justify-content: center;
}
.son{
  width: 100px;
  height: 100px;
  background: bisque;
}
</style>

4.通过定位加margin实现

<template>
  <div class="father">
    <div class="son"></div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.father{
  width: 600px;
  height: 600px;
  margin: 0 auto;
  border: 2px #000 solid;
  position: relative;
}
.son{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100px;
  height: 100px;
  background: bisque;
}
</style>