体彩排列五 www.8r31a.com.cn 体彩排列五 > 上网技巧 > 电脑小技巧 > 让div盒子相对父盒子垂直居中的几种方法

让div盒子相对父盒子垂直居中的几种方法

时间:2018-06-23 08:50 作者:QQ地带 我要评论

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
 
 #one{
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        position: relative; 
    }
#two{
    width: 200px;
    height: 200px;
    background-color: red;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -100px;
 
}
</style>
<body>
<div id="one">
    <div id="two"></div>
</div>
</body>
</html>
 
 
 
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
  #one{
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        position: relative;
    }
 
    #two{
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        margin: auto;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
  img {
         display:table-cell;
         text-align:center;
         vertical-align:middle;
 }
</style>
<body>
<div id="one">
    <div id="two"></div>
    <img src="" alt=""/>
</div>
</body>
</html>

标签: div
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告

  • 云南惊现34斤重缅甸蟒  森警及时救助放生 2018-12-16
  • 李睿的专栏作者中国国家地理网 2018-12-16
  • 端午节为什么又叫女儿节? 2018-12-16
  • 山西首届百名金牌导游大赛太原选拔赛3月8日鸣锣 2018-12-15
  • 沙特承认结果很惨痛 下一场比赛必须改变 2018-12-15
  • 公安部端午节假期首日将现出行高峰 上午达峰值——人民政协网 2018-12-15
  • 十三届全国人大一次会议第三次全体会议 2018-12-14
  • 感触名家笔下的端午文化吃香粽原来可以这样文艺 2018-12-14
  • 上交所总经理蒋锋:中欧所正积极推进海尔等公司发行D股 2018-12-14
  • 博鳌亚洲论坛亚洲媒体高峰会议 2018-12-14
  • 导演贾樟柯获2018年日本福冈亚洲文化大奖 2018-12-13
  • 【新时代 新作为 新篇章】牢记嘱托 打赢脱贫攻坚战 2018-12-13
  • 韩中国文化院相关新闻 2018-12-13
  • 中国工程院院士王泽山谈用正确的“思维方法”去创新 2018-12-13
  • 云南金平上亿蝴蝶破茧而出 涧水悠悠蝴蝶翩翩 2018-12-12
  • 280| 746| 57| 846| 142| 680| 510| 205| 664| 60|