Vertically centering a div inside another div [duplicate]

前端未结

关注

 24  3429

北海茫月

相关标签:

24条回答

遇见更好的自我

2020-11-22 01:16
I know that question was created year ago... Anyway thanks CSS3 you can easily vertically aligns div in div (example there http://jsfiddle.net/mcSfe/98/)
```
<div style="width: 100px; height: 100px">
<div>
Go to Hell!
</div>
</div>

div
{
display:-moz-box;
-moz-box-align:center;
} 
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

花落未央

2020-11-22 01:17

This will work way back to IE6!

<!DOCTYPE html> is required on IE6 too! [ will force IE6 default strict mode as well ].

( of course, the box coloring is for demo purposes only )

    #outer{
        width: 205px;
        height: 205px;
        margin: auto; 
        text-align: center;
    }
    #inner{
        text-align: left;
        vertical-align: middle;
        width: 120px;
        height: 120px;
        display: inline-block;
   
    }
    #center{
        height: 100%; width:0px;
        vertical-align: middle;
        display: inline-block;
    }
    div {background: rgba(0,128,255,.6)}

<div id=outer>
    <div id=center></div><div id=inner> The inner DIV
    </div>
</div>

0 讨论(0)

北海茫月

2020-11-22 01:18

Vertical Align Anything with just 3 lines of CSS

HTML

<div class="parent-of-element">

    <div class="element">
        <p>Hello</p>
    </div>

</div>

Simplest

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

CSS

.parent-of-element {
   position: relative;
   height: 500px;
   /* or height: 73.61% */
   /* or height: 35vh */
   /* or height: ANY HEIGHT */
}

.element {
  position: absolute;
  top: 50%;

  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

According to shouldiprefix this are the only prefixes you need

You can also use % as the value for the 'height' property of .parent-of-element, as long as parent of element has height or some content that expands its vertical size.

0 讨论(0)

遇见更好的自我

2020-11-22 01:18
try to align inner element like this:
```
top: 0;
bottom: 0;
margin: auto;
display: table;
```
and of course:
```
position: absolute;
```
0 讨论(0)
发布评论:

提交评论
- 加载中...
别跟我提以往

2020-11-22 01:19
Another way is using Transform Translate

Outer Div must set its position to relative or fixed, and the Inner Div must set its position to absolute, top and left to 50% and apply a transform: translate(-50%, -50%).
```
div.cn {
    position: relative;
    width: 200px;
    height: 200px;
    background: gray;
    text-align: center;
}

div.inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 100px;
    -webkit-transform: translate(-50%, -50%);  
    transform: translate(-50%, -50%);   
    background: red;
  
}
```
```
<div class="cn">
    <div class="inner">
        test
    </div>
</div>
```
Tested in:
- Opera 24.0 (minimum 12.1)
- Safari 5.1.7 (minimum 4 with -webkit- prefix)
- Firefox 31.0 (minimum 3.6 with -moz- prefix, from 16 without prefix)
- Chrome 36 (minimum 11 with -webkit- prefix, from 36 without prefix)
- IE 11, 10 (minimum 9 with -ms- prefix, from 10 without prefix)
- More browsers, Can I Use?
0 讨论(0)
发布评论:

提交评论
- 加载中...

一整个雨季

2020-11-22 01:19

You can do this with a simple javascript (jQuery) block.

CSS:

#outerDiv{
    height:100%;
}

Javascript:

<script type="text/javascript">
    $(document).ready(function () {
        $("#innerDiv").css('top', ($(window).height() - $("#content").height()) / 2);
    });
</script>

0 讨论(0)

热议问题