HTML居中代码怎么写？
原创HTML居中代码怎么写？
原创
Learn-anything.cn
发布于 2021-11-27 06:57:48
发布于 2021-11-27 06:57:48
<div>居中 - 法1
通过中心点，计算坐标来垂直居中。
<html>
<head>
<style type="text/css">
.content {
background-color: rgb(87, 87, 92);
position: absolute;
/* 水平居中 */
left: 50%;
width: 30%;
margin-left: -15%;
/* 垂直居中 */
top: 50%;
height: 30%;
margin-top: -15%;
}
</style>
</head>
<body>
<div class="content">Content goes here</div>
</body>
</html><div>居中 - 法2
<html>
<head>
<style type="text/css">
#content {
position: absolute;
/* 垂直居中 */
top: 0;
bottom: 0;
height: 50%;
/* 水平居中 */
left: 0;
right: 0;
width: 70%;
margin: auto;
background-color: red;
}
</style>
</head>
<body>
<div id="content"> Content here</div>
</body>
</html>垂直居中：vertical-align
设置单行或表格单元格内元素，垂直方向上的位置，不能用块级元素。可用属性值：top middle bottom 等，详细说明.
<html>
<head>
<style type="text/css">
.middle {
vertical-align: middle;
}
</style>
</head>
<body>
<div>
An
<img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32"
height="32" />
image with a middle alignment.
</div>
</body>
</html>文字居中：line-height
将文字line-height等于父容器的高度，即可垂直方向上居中；text-align可让文在水平方向上居中。
<html>
<head>
<style type="text/css">
#wrapper {
height: 100px;
background-color: red;
}
.content {
/* 文字垂直居中 */
line-height: 100px;
/* 文字水平居中 */
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper">
<p class="content">Content goes here</p>
</div>
</body>
</html>参考链接
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
