CODEWITHSUNDEEP
css
user2557504
user2557504

Reputation: 215

center div on screen no matter window size

This may be a super easy css question, but I cannot center the main area without using margin-left. Is there a better solution to center this on the screen--no matter what size the window is? I think part of the issue is that the box is 1300px. Yes- it needs to be that size.

#mainContent{
  
//margin-left: 400px !important;

width:1300px;
height:800px;
border:2px solid #f6f6f6;
background-color:black;
 

}
<div id="mainContent">

</div>

Upvotes: 2

Views: 3039

Answers (4)

Okomikeruko
Okomikeruko

Reputation: 1173

If the content is not responsive, and you want cropping when the window is less than 1300px wide, here's another option:

#mainContent{
  ...
  margin-left: calc(50% - 650px);
}

Here's an example of it in play: https://jsfiddle.net/yvwnvmsf/1/

Upvotes: 0

kpie
kpie

Reputation: 11080

#mainContent{
  
display:flex;
min-height:100vh;
align-items: center;
justify-content: center;
flex-direction: column;
border:2px solid #f6f6f6;
}
<div id="mainContent">
    <font>Like this?</font >
</div>

Upvotes: -2

Johannes
Johannes

Reputation: 67738

Try this:

#mainContent{
  position: relative;
  margin: 0 auto;
  width:1300px;
  height:800px;
  border:2px solid #f6f6f6;
  background-color:black;
}

Upvotes: 0

Naftali
Naftali

Reputation: 146302

Did you try margin: 0 auto;? It should center the div.

#mainContent{
  
  width:300px;
  height:300px;
  border:2px solid #f6f6f6;
  background-color:black;
  margin: 0 auto;
 

}
<div id="mainContent">

</div>

Upvotes: 5

Related Questions