css 让元素水平垂直居中4种方法

<script setup lang="ts"></script>
<template>
  <h3>css 让元素水平垂直居中4种方法</h3>
  <h4>1 定位+margin</h4>
  <h4>2 定位+transform</h4>
  <h4>3 flex</h4>
  <h4>4 gird</h4>
  <div class="class1">
    <div class="class11">1 定位+margin</div>
  </div>
  <div class="class2">
    <div class="class22">2 定位+transform</div>
  </div>
  <div class="class3">
    <div class="class33">3 flex</div>
  </div>
</template>
<style scoped>
.class1 {
  border: 1px solid;
  width: 400px;
  height: 200px;
  position: relative;
}
.class11 {
  border: 1px solid skyblue;
  width: 200px;
  height: 100px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.class2 {
  border: 1px solid;
  width: 400px;