体彩排列五 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提供的广告

  • 萌萌哒童趣美食来袭 “六一”就给小朋友做这个 2019-05-22
  • 庆祝改革开放40年大型主题采访活动启动 2019-05-21
  • 山西出台“金融13条”扶持小微企业  2019-05-21
  • 2016中国大学理学一流学科排行榜:中国科学院大学第一 2019-05-21
  • 对中国,美国只剩下高等学校一个优势。中国应与日、俄、韩、澳实行联合办学机制,不足师资,一起把他们从美国挖过来,所正很多是移民过去的 2019-05-20
  • 候选企业:东方证券股份有限公司 2019-05-20
  • 高房价开始衍生出新一代的低欲望社会! 2019-05-20
  • 凤凰公映礼之《父子雄兵》 2019-05-19
  • 西安七旬老人拄拐到高考志愿咨询会 帮孙子看看报啥学校 2019-05-19
  • 晓港公园花卉馆南侧场地出租项目 2019-05-18
  • 段家寨岔上村党支部主题党日助脱贫 2019-05-18
  • 懒人科技的又一巅峰  “动作识别笔”让生活更便捷 2019-05-17
  • 三晋史话:曹操是如何统一山西的? 2019-05-17
  • 交通部发布端午假期出行指南 教你如何避堵 2019-05-16
  • 苦瓜-热门标签-华商生活 2019-05-16
  • 620| 845| 310| 465| 108| 439| 901| 796| 192| 384|