How do I make a box centered on the screen like this?-CodePudding

I want to make some boxes on a website similar to on sites I've seen before. (Screenshot of some boxes) I can't figure out how to keep the entire box centered on the screen. I've tried centering the text and such, but that obviously didn't work. I am also curious if you can make the fade effect from that previous image without just giving it an image background. Other questions haven't helped.

Any help?

#epicBox {
  text-align: center;
  border-radius: 15px;
  background: #ebd80a;
  padding: 20px;
  width: 95.5%;
  height: 150px;
}

<div>Please help me with some HTML here</div>

I've tried this to just fill the screen as evenly as I can, but I want it to be smaller than the entire screen, with a good amount of area on each side.

CodePudding user response：

If you're looking for a simple, pure CSS solution to this, you could use margin: 0 auto; to achieve this, like so:

#epicBox {
    text-align: center;
    border-radius: 15px;
    background: #ebd80a;
    padding: 20px;
    width: 500px;
    height: 150px;
    margin: 0 auto;
}

With this, you can adjust your width % and it will centre it on screen, with a margin on both right and left.

Regarding the Gradient, you can also easily do this in css using something like the following:

background-image: linear-gradient(red, yellow);

Take a look at W3C Website, where they explain Css Gradients

Here is a full example with a div box.

<html>
<head>
    <style>
        #epicBox {
          text-align: center;
          border-radius: 15px;
          background: #ebd80a;
          padding: 20px;
          width: 90%;
          height: 150px;
          margin: 0 auto;
          background-image: linear-gradient(red, yellow);
        }
    </style>
</head>
<body>
    <div id="epicBox">
        My Epic Box
    <div>
</body>
</html>

CodePudding user response：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.main {
  /*this will set direct children next to each other horizontally*/
  display: flex;
  /*this will set direct childrens vertically*/
  flex-direction: column;
  /*this will set direct childrens center horizonatly because we have set flex-direction: column which change axis*/
  align-items: center;
  /*this will set direct childrens center vertically*/
  justify-content: center;
  /*Provide space between direct children*/
  gap: 15px;
  /*give height*/
  height: calc(100vh - 40px);
  margin: 20px;
}

.item {
  padding: 10px;
  background: rgb(0, 160, 255);
  background: linear-gradient(90deg, rgba(0, 160, 255, 1) 0%, rgba(125, 82, 130, 1) 100%, rgba(255, 0, 0, 1) 100%);
  color: #fff;
  font-family: Jost;
  /*to have full width*/
  width: 100%;
  /*to put direct child next to each other*/
  display: flex;
  /*to put direct child next with avilable space between them*/
  justify-content: space-between;
  text-transform: capitalize;
}

<div >
  <div >
    <span >right side text</span>
    <span >left side text</span>
  </div>
  <div >
    <span >right side text</span>
    <span >left side text</span>
  </div>
  <div >
    <span >right side text</span>
    <span >left side text</span>
  </div>
</div>

CodePudding user response：

I changed your code entirely and created something close to the image you've added. Hope it helps. :)

.wrapper {
  width: 70%;
  height: 100vh;
  display: grid;
  grid-template-rows: repeat(3, 100px);
  gap: 15px;
  margin: 0 auto;
  justify-content: center;
  align-content: center;
}

.wrapper > .epicBox {
  background: linear-gradient(75deg, blue, purple);
  color: #fff;
  display: grid;
  padding: 1rem;
  grid-template-columns: 2fr 1fr;
  border-radius: 25px;
  align-items: center;
}

<div >
  <div >
    <h2>
      99.9% SLA
    </h2>
    
    <p>
      Ensuring customer satisfaction
    </p>
  </div>
  
  <div >
    <h2>
      99.9% SLA
    </h2>
    
    <p>
      Ensuring customer satisfaction
    </p>
  </div>
  
  <div >
    <h2>
      99.9% SLA
    </h2>
    
    <p>
      Ensuring customer satisfaction
    </p>
  </div>
</div>

CodePudding user response：

Here I added a block and super center the container inside that. I defined a grid with some rows in one column with a min size width.

Test this small and large window to see how it changes; Somewhat arbitrary layout here but perhaps a starting point.

#epicBox {
  border-radius: 1rem;
  background: #ebd80a;
  /* super center the boxes-container in here */
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.boxes-container {
  border: solid red 2px;
  display: grid;
  grid-template-rows: repeat(1fr);
  grid-auto-columns: minmax(300px, auto);
  gap: 0.75rem;
}

.box-child {
  padding: 0.5rem;
  /* soome style for clairity */
  border: solid blue 3px;
  border-radius: 1rem;
  display: flex;
  flex-direction: row;
  /* center the items in the row */
  align-items: center;
  justify-content: space-between;
}

.box-child * {
  border: solid green 1px
}

<div>Cool stuff below here</div>
<div id="epicBox">
  <div >
    <div >
      <h2>One</h2><span>Happy people live here</span></div>
    <div >
      <h2>98%</h2><span>Middle ground people live here</span></div>
    <div >
      <h2>Goats</h2>
      <div>People on the other side live here</div>
    </div>
    <div >
      <h2>Peeps</h2>
      <p>People here talked a lot so there is a lot of text in here. Happy days are here again! Text here forces the width</p>
    </div>
  </div>
</div>