<! DOCTYPE html>
<html lang = "zh">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
< meta http-equiv = "Compatible con X-UA" content = "ie = edge">
<title> </title>
</head>
<style type = "text / css">
* {
margin: 0;
relleno: 0;
estilo de lista: ninguno;
}
.box {
altura: 400px;
ancho: 400 px;
borde: # 000000 1px sólido;
color de fondo: aguamarina;
tamaño de la caja: border-box;
/ * 第八 种 * /
/ * 第 一种 方法
pantalla: flex;
justify-content: centro;
alinear elementos: centro; * /
posición: relativo;
margen: 100px automático;
}
.box .inbox {
altura: 100px;
pantalla: bloque en línea;
ancho: 100px;
borde: 1px sólido # C81623;
tamaño de la caja: border-box;
color de fondo: # C81623;
posición: absoluta;
/ * 第二种 * /
/ * izquierda: 50%;
arriba: 50%;
margen izquierdo: -50px;
margen superior: -50px; * /
/ * 第三种 * /
/ * izquierda: 200 px;
arriba: 200 px;
margen superior: -50px;
margen izquierdo: -50px; * /
/ * 第四种 * /
/ * izquierda: 50%;
arriba: 50%;
transformar: traducir (-50px, -50px); * /
/ * 第五 种 * /
/ * izquierda: 50%;
arriba: 50%;
transformar: traducir (-50%, - 50%); * /
/ * di 六种 * /
/ * izquierda: 200px;
arriba: 200 px;
transformar: traducir (-50%, - 50%); * /
/ * 第七 种 * /
/ * izquierda: 0;
arriba: 0;
derecha: 0;
abajo: 0;
margen: auto; * /
}
/ * 8 种 * /
.one {
ancho: 200px;
altura: 60px;
altura de línea: 60 px;
margen: 0 automático;
color de fondo: # 00FFFF;
alinear texto: centro;
}
</style>
<body>
<! - <div class = "box">
<div class = "inbox"> </div>
</div> ->
<div class = "one">
<span> República Popular de China </ span>
</ div>
</ body>
</ html>