发表新帖
发表新帖

CSS: Responsive way to center a fluid div (without px width) while limiting the maximum width?

前端 未结
关注
6 898
Happy的楠姐
Happy的楠姐 2020-12-04 12:54

I\'ve seen a million questions about how to center a block element and there seem to be a couple popular ways to do it, but they all rely on fixed pixels widths. Then either

相关标签:
6条回答
  • 轻奢々
    2020-12-04 13:08

    I think you can use display: inline-block on the element you want to center and set text-align: center; on its parent. This definitely center the div on all screen sizes.

    Here you can see a fiddle: http://jsfiddle.net/PwC4T/2/ I add the code here for completeness.

    HTML

    <div id="container">
    <div id="main">
        <div id="somebackground">
            Hi
        </div>
    </div>
</div>

    CSS

    #container
{
    text-align: center;
}
#main
{
    display: inline-block;
}
#somebackground
{
    text-align: left;
    background-color: red;
}

    For vertical centering, I "dropped" support for some older browsers in favour of display: table;, which absolutely reduce code, see this fiddle: http://jsfiddle.net/jFAjY/1/

    Here is the code (again) for completeness:

    HTML

    <body>
    <div id="table-container">
        <div id="container">
            <div id="main">
                <div id="somebackground">
                    Hi
                </div>
            </div>
        </div>
    </div>
</body>

    CSS

    body, html
{
    height: 100%;
}
#table-container
{
    display:    table;
    text-align: center;
    width:      100%;
    height:     100%;
}
#container
{
    display:        table-cell;
    vertical-align: middle;
}
#main
{
    display: inline-block;
}
#somebackground
{
    text-align:       left;
    background-color: red;
}

    The advantage of this approach? You don't have to deal with any percantage, it also handles correctly the <video> tag (html5), which has two different sizes (one during load, one after load, you can't fetch the tag size 'till video is loaded).

    The downside is that it drops support for some older browser (I think IE8 won't handle this correctly)

    0 讨论(0)
  • 暗喜
    2020-12-04 13:10

    This might sound really simplistic...

    But this will center the div inside the div, exactly in the center in relation to left and right margin or parent container, but you can adjust percentage symmetrically on left and right.

    margin-right: 10%;
margin-left: 10%;

    Then you can adjust % to make it as wide as you want it.

    0 讨论(0)
  • 心在旅途
    2020-12-04 13:15

    Centering both horizontally and vertically

    Actually, having the height and width in percents makes centering it even easier. You just offset the left and top by half of the area not occupied by the div.

    So if you height is 40%, 100% - 40% = 60%. So you want 30% above and below. Then top: 30% does the trick.

    See the example here: http://dabblet.com/gist/5957545

    Centering only horizontally

    Use inline-block. The other answer here will not work for IE 8 and below, however. You must use a CSS hack or conditional styles for that. Here is the hack version:

    See the example here: http://dabblet.com/gist/5957591

    .inlineblock { 
    display: inline-block;
    zoom: 1;
    display*: inline; /* ie hack */
}

    EDIT

    By using media queries you can combine two techniques to achive the effect you want. The only complication is height. You use a nested div to switch between % width and

    http://dabblet.com/gist/5957676

    @media (max-width: 1000px) {
    .center{}
    .center-inner{left:25%;top:25%;position:absolute;width:50%;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
}
@media (min-width: 1000px) {
    .center{left:50%;top:25%;position:absolute;}
    .center-inner{width:500px;height:100%;margin-left:-250px;height:300px;background:#f0f;text-align:center;max-width:500px;max-height:500px;}
}
    0 讨论(0)
  • 旧巷少年郎
    2020-12-04 13:18

    From Chris Coyier's article on centering percentage width elements:

    Instead of using negative margins, you use negative translate() transforms.

    .center {
  position: absolute;
  left: 50%;
  top: 50%;

  /*
  Nope =(
  margin-left: -25%;
  margin-top: -25%;
  */

  /* 
  Yep!
  */
  transform: translate(-50%, -50%);

  /*
  Not even necessary really. 
  e.g. Height could be left out!
  */
  width: 40%;
  height: 50%;
}

    Codepen

    0 讨论(0)
  • 轻奢々
    2020-12-04 13:20

    EDIT :
    http://codepen.io/gcyrillus/pen/daCyu So for a popup, you have to use position:fixed , display:table property and max-width with em or rem values :)     with this CSS basis :

    #popup {
  position:fixed;
  width:100%;
  height:100%;
  display:table;
  pointer-events:none;
}
#popup > div {
  display:table-cell;
  vertical-align:middle;
}
#popup p {
  width:80%;
  max-width:20em;
  margin:auto;
  pointer-events:auto;
}
    0 讨论(0)
  • 甜味超标
    2020-12-04 13:26

    Something like this could be it?

    HTML

     <div class="random">
        SOMETHING
 </div>

    CSS

    body{

    text-align: center;
}

.random{

    width: 60%;
    margin: auto;
    background-color: yellow;
    display:block;

}

    DEMO: http://jsfiddle.net/t5Pp2/2/

    Edit: adding display:block doesn't ruin the thing, so...

    You can also set the margin to: margin: 0 auto 0 auto; just to be sure it centers only this way not from the top too.

    0 讨论(0)
 看不清?
提交回复
热议问题