时间：2024-01-09 09:36:02 | 来源：网站运营
时间：2024-01-09 09:36:02 来源：网站运营
如何将编辑好的html全部元素居中？：
在线咨询
<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>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-heightline-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>关键词：居中,编辑
