What is the best way to align two square blocks in the center of a page

Question

What is the best way to align two square blocks in the center of a page

I am working on a webpage where I need to display the status of two websites - whether they are currently up and running or not. For sites that are up, I want the block to have a light green background, and for those that are down, a light red one. Additionally, the name of the site should be centered inside each block.

Here is what I have attempted so far:

    body {
      font-family: sans-serif;
    }
    #container {
      width: 800px;
      height: 600px;
      margin: 0 auto;
      border: 1px solid #ccc;
    }
    #smallcontainer {
      width: 208px;
      height: 100px;
      margin: 200px auto auto;
    }
    .status {
      height: 100px;
      width: 100px;
      background: #efefef;
      float: left;
      margin-left: 2px;
      border: 1px solid #ccc;
    }

<div id="container">
  <div id="smallcontainer">
    <div class="status"></div>
    <div class="status"></div>
  </div>
</div>

While it functions (check full screen output), I believe there could be a more efficient way to achieve this with CSS. My current code feels like a workaround. How can I neatly center text both vertically and horizontally within each block?

Furthermore, is there a method to ensure that this layout is responsive across all desktop screen sizes? Would using percentage for width and height instead of pixels be a better approach?

html css styling

Answer 1

Answer №1

If you're looking to create a flexible layout, consider using flexbox. _{^{Check browser support here}}

Here's the HTML structure:

<div id="container">
    <div class="status"></div>
    <div class="status"></div>
</div>

And the corresponding CSS:

#container {
    width: 800px;
    height: 600px;
    margin: 0 auto;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
}
.status {
    height: 100px;
    width: 100px;
    background: #efefef;
    margin-left: 2px;
    border: 1px solid #ccc;
}

For a live example, check out this JSFiddle link.

Answer 2

If you're looking to create a flexible layout, consider using flexbox. _{^{Check browser support here}}

Here's the HTML structure:

<div id="container">
    <div class="status"></div>
    <div class="status"></div>
</div>

And the corresponding CSS:

#container {
    width: 800px;
    height: 600px;
    margin: 0 auto;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
}
.status {
    height: 100px;
    width: 100px;
    background: #efefef;
    margin-left: 2px;
    border: 1px solid #ccc;
}

For a live example, check out this JSFiddle link.

Answer 3

Answer №2

Check out this Fiddle for a demonstration of text alignment both vertically and horizontally centered within a div.

body {
        font-family: sans-serif;
    }
    #container {
        width: 800px;
        height: 600px;
        margin: 0 auto;
        border: 1px solid #ccc;
    }
    #smallcontainer {
        width: 208px;
        height: 100px;
        text-align: center;
        margin: 200px auto auto;
    }
    .status {
        height: 100px;
        width: 100px;
        background: #efefef;
        float: left;
        margin-left: 2px;
        border: 1px solid #ccc;
        line-height: 100px;
    }

Answer 4

Check out this Fiddle for a demonstration of text alignment both vertically and horizontally centered within a div.

body {
        font-family: sans-serif;
    }
    #container {
        width: 800px;
        height: 600px;
        margin: 0 auto;
        border: 1px solid #ccc;
    }
    #smallcontainer {
        width: 208px;
        height: 100px;
        text-align: center;
        margin: 200px auto auto;
    }
    .status {
        height: 100px;
        width: 100px;
        background: #efefef;
        float: left;
        margin-left: 2px;
        border: 1px solid #ccc;
        line-height: 100px;
    }

Answer 5

Answer №3

Check out this jsfiddle link

body {
      font-family: sans-serif;
    }
    #container {
      width: 100%;
      height: 400px;

      margin: 0 auto;
      border: 1px solid #ccc;
    position:relative;
    }
    #smallcontainer {
      width: 208px;
      height: 100px;
      position:absolute;
      left:50%;
      top:50%;
      margin-left:-100px;
      margin-top:-50px;
    }
    .status {
        height: 100px;
        width: 100px;
        background: #efefef;
        float: left;
        margin-left: 2px;
        border: 1px solid #ccc;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-box-pack: center;
        -webkit-box-align: center;

        display: -moz-box;
        -moz-box-orient: vertical;
        -moz-box-pack: center;
        -moz-box-align: center;

        display: box;
        box-orient: vertical;
        box-pack: center;
        box-align: center; 
        text-align:center;
    }

For more information on "display:flexbox", visit https://developer.mozilla.org/en-US/docs/Web/CSS/display

Answer 6

Check out this jsfiddle link

body {
      font-family: sans-serif;
    }
    #container {
      width: 100%;
      height: 400px;

      margin: 0 auto;
      border: 1px solid #ccc;
    position:relative;
    }
    #smallcontainer {
      width: 208px;
      height: 100px;
      position:absolute;
      left:50%;
      top:50%;
      margin-left:-100px;
      margin-top:-50px;
    }
    .status {
        height: 100px;
        width: 100px;
        background: #efefef;
        float: left;
        margin-left: 2px;
        border: 1px solid #ccc;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-box-pack: center;
        -webkit-box-align: center;

        display: -moz-box;
        -moz-box-orient: vertical;
        -moz-box-pack: center;
        -moz-box-align: center;

        display: box;
        box-orient: vertical;
        box-pack: center;
        box-align: center; 
        text-align:center;
    }

For more information on "display:flexbox", visit https://developer.mozilla.org/en-US/docs/Web/CSS/display

Answer 7

Answer №4

My approach to this would be:

HTML structure:

<div id="main-container">
    <div id="sub-container">
        <div class="status">
            <div class="border">
                <div class="text-content">Text Here</div>
            </div>
        </div>
        <div class="status">
            <div class="border">
                <div class="text-content">More Text Here</div>
            </div>
        </div>
    </div>
</div>

CSS styling:

* {
    box-sizing: border-box;
}
body {
    font-family: sans-serif;
}
#main-container {
    width: 95%;
    height: 400px;
    margin: 0 auto;
    border: 1px solid #ccc;
    position: relative;
}
#sub-container {
    width: 208px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.status {
    height: 100%;
    width: 50%;
    float: left;
    text-align: center;
    padding: 2px;
}
.border {
    background: #efefef;
    border: 1px solid #ccc;
    width: 100%;
    height: 100%;
    position: relative;
}
.text-content {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Check out the implementation in this fiddle link: http://jsfiddle.net/bootsified/kf7Lbq24/

Answer 8

My approach to this would be:

HTML structure:

<div id="main-container">
    <div id="sub-container">
        <div class="status">
            <div class="border">
                <div class="text-content">Text Here</div>
            </div>
        </div>
        <div class="status">
            <div class="border">
                <div class="text-content">More Text Here</div>
            </div>
        </div>
    </div>
</div>

CSS styling:

* {
    box-sizing: border-box;
}
body {
    font-family: sans-serif;
}
#main-container {
    width: 95%;
    height: 400px;
    margin: 0 auto;
    border: 1px solid #ccc;
    position: relative;
}
#sub-container {
    width: 208px;
    height: 100px;
    margin: 0 auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.status {
    height: 100%;
    width: 50%;
    float: left;
    text-align: center;
    padding: 2px;
}
.border {
    background: #efefef;
    border: 1px solid #ccc;
    width: 100%;
    height: 100%;
    position: relative;
}
.text-content {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Check out the implementation in this fiddle link: http://jsfiddle.net/bootsified/kf7Lbq24/

Answer 9

Answer №5

To center the desired divs precisely, you can apply negative margins to each one. Keep in mind that the width and height must be specified in pixels for this method to work.

body {
  font-family: sans-serif;
}
#container {
  width: 800px;
  height: 600px;
  border: 1px solid #ccc;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -400px;
  margin-top: -300px;
}
#smallcontainer {
  width: 208px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -104px;
  margin-top: -50px;
}
.status {
  height: 100px;
  width: 100px;
  background: #efefef;
  float: left;
  margin-left: 2px;
  border: 1px solid #ccc;
}

<div id="container">
  <div id="smallcontainer">
    <div class="status"></div>
    <div class="status"></div>
  </div>
</div>

Answer 10

To center the desired divs precisely, you can apply negative margins to each one. Keep in mind that the width and height must be specified in pixels for this method to work.

body {
  font-family: sans-serif;
}
#container {
  width: 800px;
  height: 600px;
  border: 1px solid #ccc;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -400px;
  margin-top: -300px;
}
#smallcontainer {
  width: 208px;
  height: 100px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -104px;
  margin-top: -50px;
}
.status {
  height: 100px;
  width: 100px;
  background: #efefef;
  float: left;
  margin-left: 2px;
  border: 1px solid #ccc;
}

<div id="container">
  <div id="smallcontainer">
    <div class="status"></div>
    <div class="status"></div>
  </div>
</div>

What is the best way to align two square blocks in the center of a page

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

I possess a solitary div element that requires dynamic replication

After closing, remove the #about section from the URL

What are some ways to optimize the use of the jquery.mCustomScrollbar.js script?

The utilization of CSS variables within intricate properties

How can I pass a parameter to a selector for an Ajax call when onClick event

Is it possible to style a nested ID with CSS?

Issues with CKEditor's failure to save content in utf-8 character encoding

Adjusting data points on a radar chart.js through user interaction

Tips for creating a line break within a Bootstrap progress bar when the text exceeds the width of a div

Update the Bootstrap carousel data-interval to stop on the click event of a specific component

Bootstrap grid. Instead of moving to the next row, scroll horizontally when the content overflows

Is there a way to create rectangles with a designated percentage of blue color using CSS or Bootstrap 3?

What is the best way to implement responsive input fields and buttons on my website?

Dynamic Mat-select-trigger that automatically adjusts its size to fit the content

My div element isn't responding to border radius adjustments on the top left and right corners

Removing HTML tags from Angular template bindings

How to customize the color of radio buttons in JFXRadioButton using CSS

iOS Safari does not support CSS transforms when applied to parent elements

Delay in dropping while using React Beautiful DnD

How can I show information on the same page as a link by simply clicking on it?