科技常识：使用css实现div垂直居中的示例_新闻中心

镇江新区隆鑫五金有限公司

普通会员

科技常识：使用css实现div垂直居中的示例

2023-05-239

今天小编跟大家讲解下有关使用css实现div垂直居中的示例，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关使用css实现div垂直居中的示例的相关资料，希望小伙伴们看了有所帮助。

复制代码代码如下:<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>CSS实现div居中</title> <style> #main { position: absolute; background-color: blue; width:400px; height:200px; left:50%; top:50%; margin-left:-200px; margin-top:-100px; border:1px solid #00F; } #content { position: absolute; background-color: yellow; width: 200px; height: 100px; left:50%; top:50%; margin-left:-100px; margin-top:-50px; text-align: center; line-height:100px; } </style> <body> <div id="main"> <div id="content"> Sun </div> </div> </body> </html>

来源：爱蒂网