NEWS

建站资讯

广州网站建设_div层垂直居中于浏览器的技巧

新闻资讯编辑：【三行广州网站建设www.3gonet.com】 发布时间2021.10.15.浏览数：3631
广州网站建设之层垂直居中于浏览器的技巧 , 广州网站建设www.3gonet.com三行网络 为您详细介绍 - 请往下阅读》

广州网站建设之层垂直居中于浏览器的技巧

广州网站建设_div层垂直居中于浏览器的技巧：

层垂直居中于浏览器，一直是新手朋友比较头疼的问题。今天就由广州网站建设公司三行给大家支招：层垂直居中于浏览器的技巧。

其实解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。

如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于浏览器的样式编写。

层垂直居中于浏览器的例子

<style type="text/css">

div {
 position:absolute;
 top:50%;
 left:50%;
 margin:-150px 0 0 -200px;
 width:400px;
 height:300px;
 border:1px solid red;
 }

</style>

本文由广州网站建设公司-三行网络原创，转载请保留版权（ 广州网站建设www.3gonet.com ）三行网络——专注于企业网站建设、响应式营销型网站定制，欢迎来电咨询！热线：020-85628720 【微信：15989229398】

标签： 广州网站建设之层垂直居中于浏览器的技巧

上一篇：广州网站建设_怎样运用list-style项目符号    下一篇：广州纺织机械设备配件厂家、公司、企业介绍

广州网站建设之层垂直居中于浏览器的技巧

微网站Webapp 三行网络专业订制开发微信网站制作,让微信公众账号实现微菜单、微活动、微会员、微商城等功能，打造炫丽的企业微网站！公众平台搭配"微网站"，犹如虎添翼！在保留公众平台所有优势的前提下，提升展示形象，更好的与客户互动。