【问题标题】:Align div vertically within parent div? [duplicate]在父div内垂直对齐div? [复制]
【发布时间】:2015-04-18 20:20:21
【问题描述】:

如何在caption-wrap 内垂直居中放置caption div?

http://jsfiddle.net/0j5e06mt/

HTML:

<div class="caption-wrap">

    <div class="caption">
        <p>test</p>
        <p>test</p>
    </div>

</div>

CSS:

.caption-wrap {background:red;height:120px;width:100%}
.caption {background:blue;text-align:center}

【问题讨论】:

    标签: html css


    【解决方案1】:

    试试:

    .caption{
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
    

    来源:http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

    【讨论】:

    • 完美!非常感谢!
    • 不要忘记供应商前缀以覆盖更多浏览器:-webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);变换:translateY(-50%);
    猜你喜欢
    • 1970-01-01
    • 2016-06-21
    • 1970-01-01
    • 1970-01-01
    • 2018-10-24
    • 2012-06-13
    • 1970-01-01
    相关资源
    最近更新 更多