体彩排列五 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-02-21
  • 双鸭山消防4名警官见义勇为勇擒持刀抢劫歹徒 2019-02-21
  • 习近平:请乡亲们同党中央一起,撸起袖子加油干! 2019-02-21
  • [微笑]别忘了马克思在说“按需分配”之前还说了一个“各尽所能”,咋各尽所能?就必须根据人与人的差异性按劳(劳动价值或劳动能力)分配! 2019-02-20
  • 服用-热门标签-华商生活 2019-02-20
  • 【专题】河北省人民政府新闻发布会 2019-02-20
  • 端午杭州地铁将延长运营时间 适当加密车次 2019-02-19
  • 动画《观海策》上线 古风奇幻一触即发 2019-02-19
  • 人民日报金台锐评:让工作日志减负增效 2019-02-18
  • 网络综艺节目的社会责任和价值引领 2019-02-18
  • 董卿白岩松朱广权 看看央视主持人大学就读啥院系 2019-02-18
  • 女性之声——全国妇联 2019-02-18
  • 主持人资料库――杨澜 2019-02-17
  • 过端午节要有“三味” 2019-02-17
  • 团市委组织召开区块链发展座谈会 助力西安打造“区块链之都” 2019-02-17
  • 140| 570| 353| 612| 731| 371| 293| 433| 555| 30|