Centering div vertically and horizontally

Question

Is there any way to center .polygon_container and .polygon vertically and horizontally? Also is there a possibility to make the size of it responsive like the <img> tag below?

http://cichyone.linuxpl.eu/ranestwen/ex/

I've tried text-align, margin auto etc and nothing works.

When I set it in the middle using margin-left and margin-top it is working only for one resolution.

Add code snippet to go through rather than posting a website url. — Nitheesh, Mar 30 '17 at 11:18

score 1 · Answer 1 · answered Mar 30 '17 at 11:17

1

You can easily use flexbox.

.owl-item > div {
    display: flex;
    justify-content: center;
    align-items: center;
}

answered Mar 30 '17 at 11:17

Doc999tor

190
3
15

score 1 · Answer 2 · answered Mar 30 '17 at 11:17

You can Center the polygon div using tansform:

I created the following HTML:

<div class="polygon_container">
    <div class="polygon">
        <h1>hello</h1>
    </div>
</div>

And for that I´m using this css:

    body
    {
        margin: 0;
        padding: 0;
    }
    .polygon_container
    {
        width: 100%;
        height: 100%;
        background: red;
    }

    .polygon
    {
        width: 50%;
        height: 50%;
        background: white;
        transform: translateX(50%) translateY(50%);
    }

Hope this is a solution for you.

score 1 · Accepted Answer · answered Mar 30 '17 at 11:19

Just Use following css

.slider .polygon_container {
    position: absolute;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    margin: auto;
    color: white;
    height: 500px;
    text-align: center;
    width: 500px;
    z-index: 99999;
}
.slider .polygon {
    color: white;
    height: 500px;
    margin: auto;
    position: absolute;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    width: 500px;
    z-index: 99999;
}

score 0 · Answer 4 · answered Mar 30 '17 at 11:18

Yes it is possible. Try this.

.polygon_container {
    position: absolute;
    height: 500px;
    width: 500px;
    top: 50%;left: 50;
    margin-left: -250px;
    margin-top: -250px;
}

html, body {
  height: 100%;width: 100%;
  margin: 0;padding: 0;
}

.container {
  height: 100%;width: 100%;
  background: url('http://cichyone.linuxpl.eu/ranestwen/ex/assets/img/slider1/1.png') no-repeat;
  background-size: cover;
}

.polygon_container {
  position: absolute;
  height: 100px;
  width: 100px;
  left: 50%;top: 50%;
  margin-top: -50px;
  margin-left: -50px;
}

.polygon_container .polygon {
  background: #fff;
  height: 100%;
  width: 100%;
  
  transform: rotate(45deg);
}

<div class="container">
  <div class="polygon_container">
    <div class="polygon"></div>
  </div>
</div>

score 0 · Answer 5 · answered Mar 30 '17 at 11:19

.slider .polygon_container {
    width: 500px;
    height: 500px;
    position: absolute;
    z-index: 99999;
    text-align: center;
    color: white;
    margin: 0 auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Updated your class.

Centering div vertically and horizontally

5 Answers5