云主机测评网HTML上下垂直居中的实现方法有以下几种：
（图片来源网络，侵删）1、使用flex布局
2、使用grid布局
3、使用定位和transform属性
4、使用tablecell和verticalalign属性
5、使用lineheight属性
下面分别介绍这几种方法：
1. 使用flex布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>Flex布局上下垂直居中</title>
<style>
.container {
display: flex;
alignitems: center;
justifycontent: center;
height: 100vh; /* 设置容器高度为视口高度 */
}
</style>
</head>
<body>
<div class="container">
我是垂直居中的内容
</div>
</body>
</html>
2. 使用grid布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>Grid布局上下垂直居中</title>
<style>
.container {
display: grid;
justifyitems: center;
alignitems: center;
height: 100vh; /* 设置容器高度为视口高度 */
}
</style>
</head>
<body>
<div class="container">
我是垂直居中的内容
</div>
</body>
</html>
3. 使用定位和transform属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>定位和transform属性上下垂直居中</title>
<style>
.container {
position: relative; /* 设置容器为相对定位 */
height: 100vh; /* 设置容器高度为视口高度 */
}
.center {
position: absolute; /* 设置内容为绝对定位 */
top: 50%; /* 距离顶部50% */
left: 50%; /* 距离左侧50% */
transform: translate(50%, 50%); /* 向左上移动自身宽高的一半，实现垂直居中 */
}
</style>
</head>
<body>
<div class="container">
<div class="center">我是垂直居中的内容</div>
</div>
</body>
</html>
4. 使用tablecell和verticalalign属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF8">
<meta name="viewport" content="width=devicewidth, initialscale=1.0">
<title>tablecell和verticalalign属性上下垂直居中</title>
<style>
.container {
height: 100vh; /* 设置容器高度为视口高度 */
display: table; /* 将容器设置为表格 */
}
.center {
display: tablecell; /* 将内容设置为表格单元格 */
verticalalign: middle; /* 垂直对齐方式为居中 */
}
</style>
</head>
<body>
<div class="container">
<div class="center">我是垂直居中的内容</div>
</div>
</body>
</html>
最新评论
本站CDN与莫名CDN同款、亚太CDN、速度还不错，值得推荐。
感谢推荐我们公司产品、有什么活动会第一时间公布！
我在用这类站群服务器、还可以. 用很多年了。