垂直和水平居中 div答案

【问题标题】：Centering div vertically and horizontally垂直和水平居中 div
【发布时间】：2017-03-30 11:08:56
【问题描述】：

有什么方法可以使.polygon_container 和.polygon 垂直和水平居中？还有可能使它的大小像下面的<img> 标签一样响应吗？

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

我尝试过文本对齐、自动边距等，但没有任何效果。

当我使用margin-left 和margin-top 将其设置在中间时，它仅适用于一种分辨率。

【问题讨论】：

添加代码 sn-p 以通过而不是发布网站 url。

标签： javascript jquery html css

【解决方案1】：

只需使用以下 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;
}

【讨论】：

【解决方案2】：

您可以轻松使用 flexbox。

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

【讨论】：

【解决方案3】：

您可以使用 tansform 将多边形 div 居中：

我创建了以下 HTML：

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

为此，我正在使用这个 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%);
    }

希望这是一个适合你的解决方案。

【讨论】：

【解决方案4】：

是的，这是可能的。试试这个。

.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>

【讨论】：

【解决方案5】：

.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%);
}

更新了你的课程。

【讨论】：