两个元素定位,要求子元素垂直居中

<!DOCTYPE html>
<html>
 <hed>
 <meta charset="utf-8">
 <title></title>
 <style>
   /*普通定位*/
 #div1{
 width: 598px;
 height: 498px;
 margin: 20px auto;
 background: gray;
 padding: 1px;
 }
 #inner_div1{
 width: 200px;
 height: 150px;
 background: ghostwhite;
 margin-left: 200px;
 margin-top: 150px;
 }
 /*绝对定位:对于不确定宽高的元素,也可以用这个方法,但是得借助js脚本*/
 #div2{
 position: relative;
 width: 598px;
 height: 498px;
 margin: 20px auto;
 background: gray; 
 }
 #inner_div2{
 position: absolute;
 width: 200px;
 height: 150px;
 background: ghostwhite;
 left: 200px;
 top: 150px;
 }
     /*流式定位,这种布局很方便,但是兼容性不好,对于高度不确定的父元素,子元素都适用*/
 #div3{  
 width: 598px;
 height: 498px;
 margin: 20px auto;
 background: gray; 
 display: flex;
 justify-content:center;
 align-items:center;
 }
 #inner_div3{
 width: 200px;
 height: 150px;
 background: ghostwhite;
 }
 /*每一种css定位方式,都可以用js动态控制*/
 </style>
 </hed>
 <body>
 <div id="parent_node">
 <div id="child_node">有两个元素,分别为父元素子元素,高度与宽度都确定,要垂直居中对齐:第一种实现js,js又可以分为两种方式
 第一种是普通定位,第二种是绝对定位
 </div>
 </div>
 <div id="div1">
 <div id="inner_div1">有两个元素,分别为父元素子元素,高度与宽度都确定,要垂直居中对齐:第2种实现css,
 css又可以分为两种方式
 第一种是普通定位,第二种是绝对定位</div>
 </div>
 <div id="div2">
 <div id="inner_div2">有两个元素,分别为父元素子元素,高度与宽度都确定,要垂直居中对齐:第2种实现css,
 css又可以分为两种方式
 第一种是普通定位,第二种是绝对定位
 </div>
 </div>
 <div id="div3">
 <div id="inner_div3">有两个元素,分别为父元素子元素,高度与宽度都确定,要垂直居中对齐:第2种实现css,
 css又可以分为两种方式
 第一种是普通定位,第二种是绝对定位,第三种流式布局
 </div>
 </div>
 </body>
</html>
<script>
var prent_node=document.getElementById("parent_node");
var child_node=document.getElementById("child_node");
 parent_node.style.width="800px";
 parent_node.style.height="200px";
 parent_node.style.background="red";
 parent_node.style.margin="0 auto";
 parent_node.style.position="relative";
 child_node.style.width="400px";
 child_node.style.height="100px";
 child_node.style.background="green";
 child_node.style.position="absolute";
//由于要居中,所以到父的距离,就是父的高-的高,再除以2
 child_node.style.top=(parent_node.offsetHeight-child_node.offsetHeight)/2+"px";
 child_node.style.left=(parent_node.offsetWidth-child_node.offsetWidth)/2+"px";
</script>

原文发布于微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer)

原文发表时间:2015-11-25

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏海说

13、Java菜单条、菜单、菜单项

13、Java菜单条、菜单、菜单项 一般用Java做界面时,都得牵涉到菜单条、菜单、菜单项的设计。菜单项放在菜单里,菜单放在菜单条里,且其字体均可设置。 13...

49600
来自专栏自动化测试实战

html——css基础

上一节我们讲了display的inline-block属性,但是我们在工作中很少用,因为这个属性对于IE7版本以下IE浏览器不兼容。我们一般用float: le...

50650
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:如何快速实现按钮组功能

最前面的话:Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便

13840
来自专栏Nian糕的私人厨房

CSS 布局_3 Position元素定位

我们之前已经介绍过行元素,块元素及行内块元素的属性了,能够知道它们是具有自己默认的显示方式的,即元素会按照文档流 (document flow) 的方式,自上而...

14740
来自专栏pangguoming

CSS判断不同分辨率显示不同宽度布局CSS3技术支持IE6到IE8

CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技...

493100
来自专栏九彩拼盘的叨叨叨

inline-block 布局写法示例

注意:如果元素之间如果没有空格,回车之类的,两端对齐会失效。如,用 Angular 的 ng-repeat 生成出来的元素之间就就没有空格。

11520
来自专栏PHP实战技术

Html小知识总结

1、跳出新页面: <basetarget=”_blank”>target="_self"不跳转 <form action="xxx.htm" target="_...

470110
来自专栏码生

StackNavigator in react-navigation 安卓标题 居左 问题

headerBackTitle: null, 屏蔽所有的导航左上角返回标题 headerBackTitleStyle: { color: 'white', ...

13730
来自专栏V站

CSS3实现鼠标移动图片上图片变大(缓慢变大,放大过程有动画过渡,过渡时间可自定义)

CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果...

30840
来自专栏十月梦想

bootstrap轮播图实现

2.轮播速度设置在整个轮播设置data-interval=“1000”设置轮播速度,1000=1m,单位是毫秒

20030

扫码关注云+社区

领取腾讯云代金券