Positioning a div in the centre but with dynamic height?_问答_开发者

Positioning a div in the centre but with dynamic height?

开发者 https://www.devze.com 2023-01-31 15:36 出处：网络

相关专题：css

I want to position a div in the middle of the page. The solution I found on the internet assumes that the div will be of static size. I need the div to be in the middle, if the content is the right size, but if it is over th开发者_运维百科e size of the div, it should become bigger, and eventually allow scrolling without changing the width.

PS: I don't need support for IE, just XULRunner (Firefox) and Webkit based browsers.

Edit: The whole page must be scrollable, not just the content div. And I need to preserve all the line breaks.

Positioning a div in the centre but with dynamic height?

Here you go:

<style>
    .container{
        border: 1px solid Red; 
        width: 300px; 
        height: 500px;
        display:table-cell;
        vertical-align:middle;
    }
    .content{
        border: 1px solid Blue; 
        width: 100px; 
        height:auto;
        min-height: 100px;
        max-height:200px;
        margin-left:auto;
        margin-right:auto;
        overflow:auto;
    }
</style>
<div class="container">
    <div class="content">
        add content here
    </div>
</div>

How it looks like:

Positioning a div in the centre but with dynamic height?

Test it.

If you don't need IE support use vertical-align property:

make the body displays as table
an outer div as table-cell and set it's vertical-align as 'middle'

like:

<style type="text/css" media="screen">
  html{
    height: 100%;
  }
  body {
    width: 100%;
    height: 100%;
    display: table;
    margin: 0;
  }

  #div_1 {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    line-height: 100%;
  }

  #div_2 {
    width: 200px;
    padding: 10px;
    border: 1px solid black;
    margin: auto;
  }

</style>

<body>
  <div id="div_1">
    <div id="div_2">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
  </div>
</body>

EDIT: A more cross-browser implementation you would make the body like that:

<body>
  <table>
    <tr><td>
      <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
    </td></tr>
  </table>
</body>

once display: table doesn't works well with IE7 and early (looks like should work on ie8, but I still couldn't make it)