CSS完美垂直置中

來源:互聯網
上載者:User

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style type="text/css">
*{ margin:0; padding:0;}
.one{ width:200px; height:200px; background:blue; position:absolute; top:50%; left:50%;margin:-100px 0 0 -100px; color:#FFF;}
p{ margin:0 auto; width:300px; height:28px; line-height:28px;/*line-height:28px;就是使文字垂直置中*/ background:red;}
</style>
</head>

<body>
<div class="one">這是一個層垂直水平置中與瀏覽器</div>
<p>段落內文字垂直置中段落內文字垂直置中</p>
</body>

</html>

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.