垂直水平居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>垂直水平居中</title>
<style>
main {
height: 152px;
background: purple;
width: 100%;
}
main > span {
background: #b4a078;
color: white;
padding: 0.3em 1em 0.5em;
border-radius: 3px;
box-shadow: 0 0 0.5em #b4a078;
}
</style>
<style>
/* 1. display:flex */
/* main {
display: flex;
justify-content: center;
align-items: center;
} */
/* 1. display:flex + margin:auto 不限定宽高*/
/* main {
display: flex;
justify-content: center;
align-items: center;
}
main > span{
margin: auto;
} */
</style>
<style>
/* 2. display:grid */
/* main {
display: grid;
justify-content: center;
align-items: center;
} */
</style>
<style>
/*3. relative + absolute定宽高 */
/* main{
position: relative;
}
main > span {
position: absolute;
top : 50%;
left: 50%;
margin-top: -16px;
margin-left: -72px;
} */
</style>
<style>
/* main {
position: relative;
}
main > span {
position: absolute;
top: calc(50% - 16px);
left: calc(50% - 72px);
} */
</style>
<style>
/*4. relative + translate 不定宽高 */
/* main {
position: relative;
}
main > span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
} */
</style>
<style>
/* table + table-cell */
/* main {
display: table;
}
main > span {
display: table-cell;
text-align: center;
vertical-align: middle;
} */
</style>
<style>
/* main: min-height =》 height */
main {
text-align: center;
}
main::after{
content: '';
display: inline-block;
vertical-align: middle;
height: 100%;
}
</style>
</head>
<body>
<main>
<span>Center me, please!</span>
</main>
</body>
</html>
border 1px
参考: https://www.jianshu.com/p/bcae724172a3