CSS Center Responsive Div

CSS Responsive Center Div

I wanted to do the same thing 2 years ago, there's the solution:

Because you want it responsive, you may use the @media function in CSS3. Like this:

@media (max-width: 480px) {
    #div {
        top: 50%; /* IMPORTANT */
        left: 50%; /* IMPORTANT */
        display: block;
        position: absolute;
        background: url(images/background.png) no-repeat center center;
        width: 750px;
        height: 417px;

        margin-top: -208.5px; /* HALF OF THE HEIGHT */
        margin-left: -375px; /* HALF OF THE WIDTH */
    }
}

The max-width you use is the maximum width of the device screen. You just copy it and change the width, height, margin-left and margin-top for the image. Also, you should change the background tag!

It will center the image on the page.

You can see an exemple at: Créations MicroWeb - Carrières. The image is totally centered even if you change the window side.

You can add overflow: hidden; on the body to make the page unscrollable when the resolution is too low. Like I did.

EDIT: JSFiddle

Center DIV & responsive

I don't intend to post something very original (my answer was second), but here is flex version, instead of grid.

Simply saying, grid is intended to use for aligning large areas of layout, whereas flex is typically better when you need to align some small things, like 3 buttons in a header. But, you still could use flex for creating overall layout, without grid. For example, Chrome inner bookmarks manager created this way.

Also, when talking about flex and CSS-grid, you should note that CSS-grid is very new animal in the world of CSS, and if you think about compatibility with older browsers, flex will be better; compare browser support for Flexbox and CSS-grid.

Test

<div id="boxes">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</div>

<style>
#boxes {
    width:100%;
    display: flex;
}

#boxes .box {
    height: 90px;
    margin: 20px;
    width: 90px;
    line-height: 90px;
    text-align: center;
    border: 1px solid Black;
}
</style>

Aligning a responsive div center

Give the div with the id of logo a width and set its margin-left and margin-right css properties to auto.. also setting a max-width to 100% will ensure the responsive behaviour..

#logo{
  width: 100%;
  max-width: 300px; /* Original width of the logo image */ 
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  float: left;
}

and i hope you have already done this but..

#logo img{ 
   max-width: 100%;
   height: auto;
}

UPDATE:

Modify your markup like so

<div id="container-top">
    <div id="logo">
        <a href="http://dev.jzm.co.nz/mytime/"><img src="http://dev.jzm.co.nz/mytime/image/data/logo-black-web.png" title="My Time Candles" alt="My Time Candles"></a>
    </div>
<!-- search -->
    <div id="search" class="visible">
        <div class="button-search">Search</div>
        <input type="text" name="filter_name" value="Search ... " onclick="this.value = '';" onkeydown="this.style.color = '#000000';">
    </div>
<!--/search-->
</div>

#container-top{
    position: relative;
}

#search{
    top: 15%;
    right: 0;
}

But then you'll have to use media queries to adjust your #search css as layout changes..
Also i have made some CSS changes above (before update section)..

how to horizontally center a responsive div?

What are you talking about? Horizontal centering is done with margin: 0 auto; it doesn't matter what size the container has.

Absolute div centered and responsive?

On absolute elements, you can use

left: 0
right: 0
margin: 0 auto

Hope this helps!

CSS Responsive Layout help: Div not staying on the same line

So after 992px you can use FlexBox to align all items horizontally in a row.

Between 768px and 992 you can use CSS Grid to create 2x2 grid and third box will span in 2nd row.

.container {
  height: 100vh;
  max-width: 1100px;
  margin: 0 auto;
}

.box-1 {
  background-color: red;
}

.box-2 {
  background-color: green;
}

.box-3 {
  background-color: blue;
}

@media screen and (min-width: 992px) {
  .container {
    display: flex;
    flex-direction: row;
    padding: 5rem;
  }

  .container > * {
    flex: 1;
    height: 300px;
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    padding: 5rem;
  }

  .box-3 {
    grid-column: 1 / span 2;
  }

<div class="container">
      <div class="box-1"></div>
      <div class="box-2"></div>
      <div class="box-3"></div>
</div>

How to center a div within a div but keep it responsive and have it stay in the center

Since you are using absolute positioning, set the bottom to 0, left to 50%, then translate it left by 50% of the width.

style={{
  position: "absolute",
  backgroundColor: "white",
  zIndex: 1,
  height: "250px",
  width: "40%",
  bottom: 0,                     // <-- 0px from bottom of screen
  left: '50%',                   // <-- 50% of parent div width from left
  transform: 'translateX(-50%)', // <-- translate left 50% of child width
}}

---

Related Topics