Geek asks and answers

How to always center a flexible square in a viewport using pure CSS?

I know this question: Height equal to dynamic width (CSS fluid layout)

But I want more !! I want a flexible container that always has an aspect ratio of the square, but with a maximum height and a maximum width of 100% of the page (window element), and on top it is always vertically and horizontally centered.

Like this:

// Container matches height of the window
// container-height = 100%; container-width = absolute-container-height
-page/browser-window-
-      #######      -
-      #cont-#      -
-      #ainer#      -
-      #######      -
---------------------


// container matches width of the window
// container-width = 100%;  container-height = absolute-container-width
--page---
-       -
-       -
-#######-
-#######-
-#######-
-#######-
-       -
-       -
---------

Is it possible to achieve this with pure css (and even a better cross browser)?

Edit: I know there is calc () for css3, but due to poor support for mobile browsers , I do not want to use it.

Edit2: , . , , . / .

jQuery:

 // container/#main-wrapper has top: 50%,  left: 50%, position: absolute  via css  
 $(window).resize(function () {
    var $ww = $(window).width();
    var $wh = $(window).height();

    if ($ww > $wh) {
        $('#main-wrapper').css({
            height: $wh,
            width: $wh,
            marginTop : ($wh / 2) * -1,
            marginLeft : ($wh / 2) * -1
        });
    } else {
        $('#main-wrapper').css({
            height: $ww,
            width: $ww,
            marginTop : ($ww / 2) * -1,
            marginLeft : ($ww / 2) * -1

        });
    }
});
+5
4

, , . .

html:

.l-table
  .l-table-cell
    .square

css ( scss, ),

html,
body{
  height: 100%
}
l-table{
  background: orange;
  display: table;
  height: 100%; 
  width: 100%;
}
.l-table-cell{
  display: table-cell;
  vertical-align: middle;
  border: 2px solid black;
}
.square{
  background: red;
  margin: auto;
  @media (orientation:landscape) {
    width: 70vh;
    height: 70vh;
  }
  @media screen and (orientation:portrait) {
    width: 70vw;
    height: 70vw;
  }
}

http://codepen.io/johannesjo/pen/rvFxJ

, , polyfill.

+3

EDIT: , . , 100% , , , , . .

, , , , , , - .

, , , 60% , 60% , .

.

, , .

width: 60%;
height:0;
padding-bottom: 60%;

Codepen

landscape, . ( , .)

max-height, padding-bottom.

div, - ( C-Link ), , , , , .

+1

How about if you take the earlier concept with another step with a similar div as a container. The container has an extra maximum height and width. I tried this and the container does not throw a scrollbar at me. This is quite interesting in the behavior that I have to say myself. Does this work for you?

<div id="container">
    <div id="centered">A DIV</div>
</div>

    #container {
    top:0;
    bottom:0;
    right:0;
    left:0;
    margin:auto;
    position:absolute;
    width:200px;
    height:200px;
    max-width:100%;
    max-height:100%;
    background:#00f;
    padding:0;
}
#centered {
    background: green;
    bottom: 0;
    height: 80px;
    left: 0;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
}

updated script: http://jsfiddle.net/djwave28/mBBJM/96/

0
source

HTML

<div id="outer">
<div id="inner">YOUR CONTENTS HERE
</div>
</div>

CSS

html, body{
height: 100%;
}
#outer{
max-height: 100%;
max-width: 100%; 
position: relative; 
height: 100%;
}
#inner{
position: relative; 
top: 50%; 
margin-top: -50% auto auto auto; 
background: red; 
text-align: center; 
color: yellow;
}

See fiddle .

0
source

More articles:


All Articles