专栏首页互联网杂技两个元素定位,要求子元素垂直居中

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

<!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),作者:json

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 你的布局设定方法靠谱吗?

    本文不适合采用天才设计(Genius Design)方法的人士。 有一种“奇怪的”现象会经常的看到“很多设计师没有办法清楚的跟其他人解释他们是如何设计的,越细致...

    前朝楚水
  • 自定义下拉列表

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>...

    前朝楚水
  • 30+有用的CSS代码片段

    在一篇文章中收集所有的CSS代码片段几乎是不可能的事情,但是我们这里列出了一些相对于其他的更有用的代码片段,不要被这些代码的长度所吓到,因为它们都很容易实现,并...

    前朝楚水
  • js动画之无缝滚动

    skylark
  • H5实现之登录模版的实现 原

    用户2603479
  • HTML 引用Css样式的四种方式

    不才,只知道HTML引用CSS样式有四种方式,内部引用和外部引用各两种,因为老是忘记细节,记下了随时翻阅亦可方便如我般的初学者

    乔达摩@嘿
  • 微信拍一拍效果的原理分析及代码实现

    微信拍一拍功能上线之后,其用户评价褒贬不一,这里我们不去凑热闹讨论这个功能的应用场景是否真的如部分网友说的毫无卵用,毕竟这是产品经理们应该考虑的事,但我相信作为...

    石璞东
  • DOM的滚动

    DOM规范中并没有规定各浏览器需要实现怎样的滚动页面区域,各浏览器实现了相应的方法,可以使用不同的方式控制页面区域的滚动。这些方法作为HTMLElement类型...

    meteoric
  • css3 过渡和2d变换——回顾

    1.transition   语法:transition: property duration timing-function delay;       tr...

    用户1197315
  • “穿透”层的鼠标事件

    需要实现如下的效果,有一个浮动层,需要层级在它之下的一个元素也能照常响应相应的事件

    meteoric

扫码关注云+社区

领取腾讯云代金券