css垂直居中最常用的八种布局方法
首先定义两个盒子,然后进行下布局样式操作!
利用CSS进行元素的水平居中，比较简单，行级元素设置其父元素的text-align center
块级元素设置其本身的left 和 right margins为auto即可
本文收集了八种利用css进行元素的垂直居中的方法
每一种适用于不同的情况，在实际的使用过程中选择某一种方法即可
<body><div class="box"><div class="coco"></div></div></body>
<style>/* 1 display:flex */.box{width: 400px;height: 400px;background-color: pink;display: flex;justify-content: center;align-items: center;}.coco{height: 100px;width: 100px;background-color: #06A9F4;}/* 第二 table-cell */.box{width: 400px;height: 400px;background-color: #06A9F4;display: table-cell;text-align: center;vertical-align: middle;}.coco{width: 100px;height: 100px;background-color: #42B983;display: inline-block;}/* 方法3 */.box{width: 400px;height: 400px;background-color: #666666;overflow: hidden;}.coco{width: 100px;height: 100px;background-color: #C82519;margin: 50% auto;transform: translateY(-50%);}/* 方法四 inline-block + vertical-align*/.box{width: 300px;height: 300px;background-color: pink;text-align: center;line-height: 300px;}.coco{width: 100px;height: 100px;line-height: 100px;background-color: plum;display: inline-block;vertical-align:middle;}/* 方法5 abloute 负marin */.box{width: 300px;height: 300px;position: relative;background-color: plum;}.coco{width: 100px;height: 100px;background-color: #42B983;position: absolute;left: 50%;top: 50%;margin-left: -50px;margin-top: -50px;}/* 6. 父节relative abouter margin:auto */.box{width: 400px;height: 400px;position: relative;background-color: plum;}.coco{width: 100px;height: 100px;position: absolute;left: 0;right: 0;bottom: 0;top: 0;margin: auto;background-color: #42B983;}/* 第7点 */.box {width: 300px;height: 300px;position: relative;background-color: #C82519;}.coco{width: 100px;height: 100px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background-color:#06A9F4 ;}/* 第八点 强大的grid*/.box{width: 300px;height: 300px;display: grid;background-color: palegoldenrod;}.coco{width: 100px;height: 100px;align-self: center;justify-self: center;background-color: #E5E5E5;}</style>
![[推荐]捉鱼(Catching fish)1500字英语作文](https://1500zi.500zi.com/uploadfile/img/2024/08/22/716a3df6ff7d840cd6d979efa0908b48.jpg)
