1.相对定位和绝对定位
2.flex布局
3.gird布局
<!-- ##CSS
###1.一个盒子垂直水平居中有哪些方法?(2~3种方法) -->
<template>
<div id="app">
<!-- 1相对定位 -->
<!-- <div class="box1">
<div class="contant1"></div>
</div> -->
<!-- 2 flex布局 -->
<!-- <div class="box2">
<div class="contant2"></div>
</div> -->
<!-- 3. gird布局 -->
<div class="box3">
<div class="contant3"></div>
</div>
</div>
</template>
<style scoped>
html ,body ,#app{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box1{
width: 100%;
height: 100%;
background-color: skyblue;
position: relative;
}
.contant1{
position: absolute;
background-color: rgb(207, 157, 18);
height: 300px;
width: 300px;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.box2{
height: 100%;
background-color: rgb(95, 225, 214);
display: flex;
justify-content: center;
align-items: center;
}
.contant2{
background-color: rgb(16, 149, 100);
height: 300px;
width: 300px;
}
.box3 {
display: grid;
height: 100%;
place-items: center;
background-color: rgb(126, 34, 176);
}
.contant3{
background-color: rgb(212, 111, 17);
height: 300px;
width: 300px;
}
</style>