垂直和水平对齐div中的div：在选择器

Question

我有这个HTML＆amp; CSS代码：

＆＃13;

＆＃13;

html {
  overflow-x: hidden;
  overflow-y: hidden;
}
body {
  margin: 0;
}
.triangle-down {
  width: 90%;
  height: auto;
  padding-left: 50%;
  padding-top: 50%;
  overflow: hidden;
}
.triangle-down:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  margin-left: -500px;
  margin-top: -500px;
  border-left: 500px solid transparent;
  border-right: 500px solid transparent;
  border-top: 500px solid #9CE08F;
}
div {
  float: left;
  margin: 0.5%;
}

＆＃13;

<div class="triangle-down">
  <div>&nbsp;</div>
</div>

＆＃13;

＆＃13;

＆＃13;

我正在尝试使div中的triangle-down垂直和水平对齐。或者，我可以使用文本而不是div并对齐它。在这种情况下，我使用：after选择器，我无法改变CSS以使其工作。我知道如何使用position:relative和position:absolute甚至display:inline-block来完成此操作。

但在这种情况下，它更复杂。如果我改变三角形的CSS，那么我不再得到一个三角形了。

我希望有这样的东西：

Answer 1

.btn {
    position: relative;
    display: inline-block;
    height: 0px; width:100%;
    text-align: center;
    color: white;
    background: gray;
    line-height: 50px;
    text-decoration: none;
    padding-bottom:42%;
    background-clip:content-box;
    overflow:hidden;
}
.btn:after {
    content: "";
    position: absolute;
    top:0px; left: 0;
    background-color:inherit;
    padding-bottom:50%; width:57.7%;
    z-index:-1;
    
    -webkit-transform-origin:0 0;
    -ms-transform-origin:0 0;
    transform-origin:0 0;
    
    -webkit-transform: rotate(-30deg) skewX(30deg);;
    -ms-transform: rotate(-30deg) skewX(30deg);
    transform: rotate(-30deg) skewX(30deg);
}
/** FOR THE DEMO
body{background: url('http://lorempixel.com/output/people-q-c-640-480-1.jpg');background-size:cover;} **/

<a href="#" class="btn">Hello!</a>

Answer 2

请尝试以下

＆＃13;

＆＃13;

.up {
    width: 0px;
    height: 0px;
    margin-bottom: 30px;
    border-style: inset;
    border-width: 0 100px 173.2px 100px;
    border-color: transparent transparent #007bff transparent;
    float: left;
    transform:rotate(540deg);
    -ms-transform:rotate(540deg);
    -moz-transform:rotate(540deg);
    -webkit-transform:rotate(540deg);
    -o-transform:rotate(540deg);
  display:block;
}

.up p {
    text-align: center;
    top: 59px;
    left: -47px;
    position: relative;
    width: 93px;
    height: 93px;
    margin: 0px;
     -webkit-transform:rotate(540deg);
      transform:rotate(540deg));
    -ms-transform:rotate(540deg));
    -moz-transform:rotate(540deg));
     -o-transform:rotate(540deg);
}

＆＃13;

<div class="up">
<p>some information text goes here</p>
</div>

＆＃13;

＆＃13;

＆＃13;