1.定位实现水平垂直居中
<div class="outer"><div class="test inner1">定位实现水平垂直居中</div></div><style>.outer {width: 300px;height: 300px;border: 1px solid gray;margin: 100px auto 0;position: relative;}.test {width: 100px;height: 100px;background-color: orange;}.inner1 {/* 方法一 定位*/position: absolute;/* 相对于包含块，最近的定位的祖先或父元素 */top: 50%; left: 50%;margin-left: -50px;margin-top: -50px;}
</style>
2.定位+位移
<div class="outer"><div class="test inner2">定位+位移</div></div>
<style>
.outer {width: 300px;height: 300px;border: 1px solid gray;margin: 100px auto 0;position: relative;}.test {width: 100px;height: 100px;background-color: orange;}.inner2 {position: absolute;top: 50%;left: 50%;/*方法二 translate中的百分比是相对自身，50% 相当于100*50% = 50*/transform: translate(-50%, -50%);}
</style>3.相对于整个视口水平垂直居中
<div class="view">相对于整个视口水平垂直居中</div><style>body {position: relative;}/* 方法三 */.view {width: 100px;height: 100px;background-image: linear-gradient(red, yellow, green);position: fixed;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}</style>4.flex+margin
<head><style>.outer {width: 400px;height: 400px;background-color: gray;display: flex;}.inner {width: 100px;height: 100px;margin: auto;background-image: linear-gradient(green, yellow);}</style>
</head>
<body><div class="outer"><div class="inner"></div></div>
</body>5. flex 水平垂直居中
<head><style>.outer {width: 400px;height: 400px;background-color: gray;display: flex;/* 水平居中 */justify-content: center;/* 垂直居中 */align-items: center;}.inner {width: 100px;height: 100px;background-image: linear-gradient(green, yellow);}</style>
</head>
<body><div class="outer"><div class="inner"></div></div>
</body>6.遮挡层
<div class="item"></div>/* 遮挡层 */.item {background-image: repeating-linear-gradient(red 200px, yellow 500px, green 700px);opacity: 0.5;position: fixed;top: 0;left: 0;right: 0;bottom: 0; }
