How do I center this code in the middle of the page?

HTML & CSS
21

Cool. I’ll get back with you in a few minutes.

22

I just did this, I don’t know if I set it up right though: http://www.cssdesk.com/CgKvZ

23

Please copy this code to a file and open it in your browser.

Consider this a draft to see if it fits your expectations.
It will adjust down to 400px, the width of one “item”.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/how-do-i-center-this-code-in-the-middle-of-the-page/228278
asasass
2016.06.24 20:34
-->
    <style type="text/css">

* {
    box-sizing:border-box;
}

html,body {
    padding:0;
    margin:0;
}

.outer {
    display:flex;
    min-height:100vh;
    flex-direction:column;
    justify-content:center;
}

.container {
    max-width:1208px;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    margin:0 auto;
}

.item {
    outline:1px solid blue;  /* TEST Outline.  To Be DELETED. */
    padding-top:0; 
    padding-right:50px; 
    padding-bottom:100px; 
    padding-left:50px;
}

.item h3 {
    color:#0059dd;
    font-size:30px;
    line-height:1;
    font-weight:bold;
    margin:0;
}

.item-line {
  display:block;
  width:300px;
  height:24px;
  background-color:#E2AB58;
}
    </style>
</head>
<body>

<div class="outer">
  <div class="container">
    <div class="item">
      <h3>Radio 1</h3>
      <span class="item-line"></span>
    </div>
    <div class="item">
      <h3>Radio 2</h3>
      <span class="item-line"></span>
    </div>
    <div class="item">
      <h3>Radio 3</h3>
      <span class="item-line"></span>
    </div>
    <div class="item">
      <h3>Radio 4</h3>
      <span class="item-line"></span>
    </div>
    <div class="item">
      <h3>Radio 5</h3>
      <span class="item-line"></span>
    </div>
    <div class="item">
      <h3>Radio 6</h3>
      <span class="item-line"></span>
    </div>
    <div class="item">
      <h3>Radio 7</h3>
      <span class="item-line"></span>
    </div>
    <div class="item">
      <h3>Radio 8</h3>
      <span class="item-line"></span>
    </div>
    <div class="item">
      <h3>Radio 9</h3>
      <span class="item-line"></span>
    </div>
  </div>
</div>

</body>
</html>
24

How would you prevent it from collapsing to 2 blocks?

How can I keep the 3 blocks (rows) always open without collapsing?

25

(No need to copy my code into your post.)

Just change the width property of .container from max-width to width.
(max-width allows the width to become narrower, width keeps the width fixed)

.container {
    width:1208px;    /* changed from max-width: */
26

Exactly set up like this, but centered in the middle:
http://www.cssdesk.com/CgKvZ

27

That isn’t going to be all that well centered on a 300px wide screen though

28

[I don’t believe I need:]
align-items: center;
justify-content:center;

margin:0 auto; seems to work without those.

What do you say?

Look: http://www.cssdesk.com/CgKvZ

29

Makes no difference if this code is included or not, no change.
.outer {
display:flex;
min-height:100vh;
flex-direction:column;
justify-content:center;
}

30

Do you want the items surrounded by a blue border?

31

I already have the padding set individually, item 1, item 2.
2 different puddings.

I’m just trying to center the whole code in the middle now. It’s already vertically centered.

http://codepen.io/dszdasdsa/pen/dXNVPr?editors=1100

32

Did you add the outer container to the HTML?

33

Why is the code at the top here:
http://www.cssdesk.com/CgKvZ

But lower here: ?
http://www.cssdesk.com/RBEV5

After you close the left side panel?

34

Because RBEV5 contains the .outer container and its CSS.

35

I fixed it:
http://www.cssdesk.com/CgKvZ

What does 100vh mean?

36

Here it is: https://testblog567895.blogspot.com/

Now, how do I get rid of the right scroll bar like there’s not one showing here?
http://testblogty678.blogspot.com/

37

vh is a unit of height measurement relative to the viewport height (vh). 100vh means 100% of the height of the viewport.

If you look up CSS units of measure you will find it described along with (vw), viewport width.

38

Does your CSS code contain

body {
    padding:0;
    margin:0;
}

If not, add it to the CSS.

39

you mean:

html,body {
padding:0;
margin:0;
}

40

That will work, too.