zoukankan      html  css  js  c++  java
  • 一个div在另一个div中水平垂直的方法

    html

     
    <div id="main">
      <div id="box">
        一个div在另一个div中垂直居中实现方法
      </div>
    </div>

    一、宽高都定的div在另一个div中水平垂直居中实现方法

    css样式:

    方法一:

    #main{
       300px;
      height: 300px;
      position: relative;
      background: yellow;
    }
    #box{
      position: absolute;
       100px;
      height: 140px;
       left: 50%;
       top: 50%;
       margin-left: -50px;/*width的一半*/
       margin-top: -70px;/*height的一半*/
       background: red;
    }
    

    方法二:

    #main{
       300px;
      height: 300px;
      position: relative;
      background: yellow;
    } #box{   position: absolute;   margin: auto;    100px;   height: 140px;   left:0;   right: 0;   top: 0;   bottom: 0;   background: red; }

    二、不定宽高的div在另一个div中水平垂直居中实现方法

    css样式:

    #main{
      position: relative;/*在父元素中使用相对定位*/
       500px;
      height: 200px;
      overflow: hidden;
      background-color: #ff0;
      padding: 10px;
    }
    #box{
      position: absolute;   /*在子元素中使用绝对定位*/
      top:50%;                /*距离相对于父元素的50%的高*/		
      left:50%;
      background-color: #eee;
      -webkit-transform:translate(-50%,-50%);    /*CSS3的样式,:translate(-50%,-50%)相对于自己距离x轴和y轴的-50%*/
      transform:translate(-50%,-50%);
    }
  • 相关阅读:
    cookie 当天12点 过期
    ps 前端常用技巧
    定时器遇到的坑
    ajax 会遇到的问题总结
    立即执行函数表达式 项目经常用到js 代码Module模式
    Hello world
    div position:fixed后,水平居中的问题
    关于div中图片水平垂直居中的问题
    [学习]Activiti流程引擎 入门(1) 初步认识
    SSO框架介绍前篇
  • 原文地址:https://www.cnblogs.com/jing428/p/6907842.html
Copyright © 2011-2022 走看看