<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>参考链接
- html居中代码怎么写？