要实现一个在华为云国际站上的代理商页面中垂直居中的div，可以使用以下CSS和HTML代码。这种方法适用于现代浏览器，使用Flexbox来实现垂直和水平居中。
HTML代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>代理商页面</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="centered-div">
<h1>欢迎来到华为云国际站</h1>
<p>成为我们的代理商，享受更多优惠和支持。</p>
</div>
</div>
</body>
</html>CSS代码（styles.css）：
html, body {
height: 100%;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.centered-div {
text-align: center;
border: 1px solid #ccc;
padding: 20px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
background-color: #fff;
}这个示例中：
html和body设置为100%的高度并使用Flexbox属性进行对齐。.container也是一个Flex容器，内部的div被居中。.centered-div内部内容水平居中对齐，并添加一些样式使其更具吸引力。
通过这种方式，你可以确保你的div在各种设备和浏览器上都能居中显示。
发布者：luotuoemo，转转请注明出处：https://www.jintuiyun.com/190640.html
