Use a piece of css to realize the vertical and horizontal centering method of the box (8 types)-case

Effect Picture- Online Case

Attributes in css3: transform: translate(x,y)

<style>    .box {      width: 100px;      height: 100px;      background: orange;      position: absolute;      left: 50%;      top: 50%;      transform: translate(-50%, -50%);    }  </style></head> <body>  <div class="box"></div></body>

Use flex layout

<style>    body {      display: flex;      justify-content: center;      align-items: center;      height: 100vh;      margin: 0;      padding: 0;    }     .box {      width: 100px;      height: 100px;      background: orange;    }  </style></head> <body>  <div class="box"></div></body>

Use absolute positioning

Add margin-left: -(width is half of the box), margin-top: -(height is half of the box)
<style>    .box {      width: 100px;      height: 100px;      background: orange;      position: absolute;      left: 50%;      top: 50%;      margin-left: -50px;      margin-top: -50px;    }  </style></head> <body>  <div class="box"></div></body>

8 other ways- online case

<!DOCTYPE html><html>	<head>		<meta charset="utf-8">		<title>元素垂直水平居中</title>		<style type="text/css">			body {				background-color: #6ed0ff;			} 			.father {				background-color: #be33ec;				border-radius: 20px;				box-shadow: 0 0 15px rgb(0, 0, 0);				margin: 100px auto;				width: 300px;				height: 300px;			} 			.son {				background-color: #fcff00;				border-radius: 20px;				box-shadow: 0 0 10px rgb(0, 0, 0);				width: 100px;				height: 100px;			}		</style>	</head>	<body>		<div class="father">			<div class="son"></div>		</div>	</body></html>
Achieve the vertical centering effect of the child box relative to the parent box

grid

.father {    display: grid;} .son {    align-self: center;    justify-self: center;}

absolute +(- margin)

.father {    position: relative;} .son {    position: absolute;    left: 50%;    top: 50%;    margin-left: -50px;    margin-top: -50px;}

absolute + transform

.father {    position: relative;} .son {    position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%, -50%);}

absolute + margin: auto

.father {    position: relative;} .son {    position: absolute;    left: 0;    right: 0;    top: 0;    bottom: 0;    margin: auto;}

flex

.father {    display: flex;    justify-content: center;    align-items: center;}

margin+transfrom

.father {    overflow: hidden;} .son {    margin: 50% auto;    transform: translateY(-50%);}

table-cell

.father {    display: table-cell;    text-align: center;    vertical-align: middle;} .son {    display: inline-block;}

inline-block + vertical-align

.father {    text-align: center;    line-height: 300px;} .son {    display: inline-block;    vertical-align: middle;}