verticalCenter 垂直居中

方法1 top: 50%; left: 50%; transform: translate(-50%, -50%);

详细代码

<template>
    <div class="parentElement">
        <div class="childElement"> </div>
    </div>
</template>

<style scoped lang="scss">
.parentElement {
    background-color: bisque;
    position: relative;
    height: 150px;

    .childElement {
        height: 100px;
        width: 150px;
        background-color: darkcyan;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
</style>

方法2 top: 0;bottom: 0;left: 0;right: 0;margin: auto;

详细代码

<script setup>
import { ref, computed } from 'vue'
import { ElCheckboxGroup, ElCheckbox } from 'element-plus'

const checkList = ref([
    "top: 0;",
    "bottom: 0;",
    "left: 0;",
    "right: 0;",
    "margin: auto;",
])
const checkListStr = computed(() => {
    if (checkList.value.length) {
        return checkList.value.reduce(function (pre, cur) {
            return pre + cur
        })
    }
    return ""
})
</script>

<template>
    <div class="parentElement">
        <div class="childElement" :style="checkListStr"> </div>
    </div>

    <el-checkbox-group v-model="checkList">
        <el-checkbox value="top: 0;" />
        <el-checkbox value="bottom: 0;" />
        <br>
        <el-checkbox value="left: 0;" />
        <el-checkbox value="right: 0;" />
        <br>
        <el-checkbox value="margin: auto;" />
    </el-checkbox-group>
</template>

<style scoped lang="scss">
.parentElement {
    background-color: bisque;
    position: relative;
    height: 150px;

    .childElement {
        height: 100px;
        width: 150px;
        background-color: darkcyan;
        position: absolute;
    }
}
</style>

方法3

align-items: center; // 垂直

justify-content: center; // 横向

详细代码

<script setup>
import { ref, computed } from 'vue'
import { ElCheckboxGroup, ElCheckbox } from 'element-plus'

const checkList = ref([
    "align-items: center;",
    "justify-content: center;"
])
const checkListStr = computed(() => {
    if (checkList.value.length) {
        return checkList.value.reduce(function(pre,cur){
            return pre+cur
        })
    }
    return ""
})
</script>

<template>
    <div class="parentElement" :style="checkListStr">
        <div class="childElement"> </div>
    </div>

    <el-checkbox-group v-model="checkList">
        <el-checkbox value="align-items: center;" />
        <br>
        <el-checkbox value="justify-content: center;" />
    </el-checkbox-group>
</template>

<style scoped lang="scss">
.parentElement {
    display: flex;
    height: 150px;
    background-color: bisque;

    .childElement {
        height: 100px;
        width: 150px;
        background-color: darkcyan;
    }
}
</style>

方法4

.parentElement {
  display: block;
  &:before {
    content: " ";
    display: inline-block;
    vertical-align: middle;
    height: 100%;
  }
  .childElement {
    display: inline-block;
    vertical-align: middle;
  }
}

warning

横向居中不会

详细代码

<template>
    <div class="parentElement">
        <div class="childElement"> </div>
    </div>
</template>

<style scoped lang="scss">
.parentElement {
    display: block;
    background-color: bisque;
    height: 150px;

    &:before {
        content: " ";
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        height: 100%;
    }

    .childElement {
        display: inline-block;
        vertical-align: middle;
        text-align: center;
        height: 100px;
        width: 150px;
        background-color: darkcyan;
    } 
}
</style>

方法5 建立1个隐藏节点的高为 (父级高 - 去子级高)/2

.parentElement {
    display: block;
    background-color: bisque;
    height: 100px;
    width: 100%;

    .hide {
        height: 35%; // 隐藏节点的高为 (父级高 - 去子级高)/2
    }

    .childElement {
        width: 20%;
        height: 30%;
        background-color: darkcyan;
    }
}

详细代码

<template>
    <div class="parentElement">
        <div class="hide"></div>
        <div class="childElement"> </div>
    </div>
</template>

<style scoped lang="scss">
.parentElement {
    display: block;
    background-color: bisque;
    height: 100px;
    width: 100%;

    .hide {
        height: 35%; // 隐藏节点的高为 (父级高 - 去子级高)/2
    }

    .childElement {
        width: 20%;
        height: 30%;
        background-color: darkcyan;
    }
}
</style>

方法5 建立1个隐藏节点的高为 (父级高 - 去子级高)/2

.parentElement {
    display: block;
    background-color: bisque;
    height: 100px;
    width: 100%;

    .hide {
        height: 35%; // 隐藏节点的高为 (父级高 - 去子级高)/2
    }

    .childElement {
        width: 20%;
        height: 30%;
        background-color: darkcyan;
    }
}

详细代码

<template>
    <div class="parentElement">
        <div class="hide"></div>
        <div class="childElement"> </div>
    </div>
</template>

<style scoped lang="scss">
.parentElement {
    display: block;
    background-color: bisque;
    height: 100px;
    width: 100%;

    .hide {
        height: 35%; // 隐藏节点的高为 (父级高 - 去子级高)/2
    }

    .childElement {
        width: 20%;
        height: 30%;
        background-color: darkcyan;
    }
}
</style>

方法6 display:table-cell

.parentElement {
    display: table;
    height: 150px;
    width: 300px;
    background-color: #f00;

    .childElement {
        display: table-cell;
        vertical-align: middle;
        height: 30%;
        background-color: darkcyan;
    }

    .childElement:last-child {
        background-color: aliceblue;
    }
}

不太好用的亚子

详细代码

<template>
    <div class="parentElement">
        <div class="childElement"> </div>
        <div class="childElement"> </div>
    </div>
</template>

<style scoped lang="scss">
.parentElement {
    display: table;
    height: 150px;
    width: 300px;
    background-color: #f00;

    .childElement {
        display: table-cell;
        vertical-align: middle;
        height: 30%;
        background-color: darkcyan;
    }

    .childElement:last-child {
        background-color: aliceblue;
    }
}
</style>