美工统筹SEO，为企业电子商务营销助力！
CSS定位“十字架”之程度垂直居中
一佰互联网站建造(www.taishanly.com) 宣布日期 2020-04-21 17:24:57 阅读数: 176
本文为大师分享了CSS定位“十字架“之程度垂直居中结果的完成体例，详细内容以下
1.先看要完成的结果
现实的结果图
能够看到我的完成进程是先利用一个父级的div来定位程度垂直居中，而后再父级的div中定位出两个十字架的div。
看完成代码：
XML/HTML Code复制内容到剪贴板- <html>
- <head>
- <title></title>
- <style>
- body{margin:0;padding:0}
- /*定位父级div程度垂直居中*/
- .body_main{
- width:200px;
- height: 300px;
- background-color: #3091E5;
- margin:-150px 0 0 -100px;
- top:50%;
- left:50%;
- position: absolute;
- }
- /*定位程度div垂直居中*/
- .row_div{
- width:200px;
- height: 50px;
- background-color:#88E500;
- position: absolute;
- top:50%;
- margin:-25px 0 0 0;
- }
- /*定位列div程度居中*/
- .clou_div{
- width:50px;
- height: 300px;
- background-color: #3c510c;
- left:50%;
- position: absolute;
- margin:0 0 0 -25px;
- }
- </style>
- </head>
- <body>
- <div class="body_main">
- <div class="row_div">横向的div</div>
- <div class="clou_div">竖直的div</div>
- </div>
- </body>
- </html>
div默许的宽度是100%，当div绝对定位今后，其宽度是根据div中内容的宽度。
总结：
css中的绝对定位是绝对比来已定位的先人元素停止定位，若是元素不已定位的先人元素，那末地位绝对初始的包罗块停止定位。
以上便是本文的全数内容，但愿对大师的进修有所赞助。
TAG标签： CSS定位“十字架”之程度垂直居中
一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历，供给的办事更是天下着名。比来几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版，拖拽排版网站建造设想，轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ，已胜利的为天下上百家收集公司供给自助建站平台搭建办事。
