How to center an image that is absolute

Navigation
1

I'm not able to center an image that has the position: absolute; property I tried to use a text-align: center

Note: the result has to work in browsers: Google chrome, Mozilla, Safari and Opera 

html,
body {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
ul li {
  list-style-type: none;
}
.text-center {
  text-align: center !important;
}
.corpo-1 h1 {
  color: #000;
  text-align: center;
  font-family: Gabriola;
  font-size: 2.8em;
  font-weight: bold;
  margin-top: 40%;
}
.corpo-1 p {
  color: #000;
  text-align: center;
  font-family: Gabriola;
  font-size: 1.2em;
  margin-top: -2%;
}
.linha-titulo {
  width: 30%;
  height: 1.9px;
  border: none;
  background: #000;
}
.tamanho {
  -webkit-transform: scale(0.6);
  -o-transform: scale(0.6);
  -ms-transform: scale(0.6);
  -moz-transform: scale(0.6);
  transform: scale(0.6);
}
.info h1 {
  margin-top: -3%;
}
.info p {
  line-height: 10px;
}
.info {
  text-align: center;
  margin-top: 5%;
}
.info li {
  display: inline;
  float: left;
  width: 33%;
  height: 380px;
}
#btn-info {
  border: 3px solid #000;
  border-radius: 5px;
  width: 220px;
  height: 50px;
  text-align: center;
  font-family: Gabriola;
  font-size: 1.5em;
  color: #000;
  background: transparent;
  cursor: pointer;
  clear: both;
  display: block;
  margin: 5% auto 5%;
}
#btn-info:hover {
  background: #000;
  color: #fff;
}
.bg-transparente {
  -webkit-transform: scale(0.8);
  -o-transform: scale(0.8);
  -ms-transform: (0.8);
  -moz-transform: scale(0.8);
  transform: scale(0.8);
  position: absolute;
  margin-top: -10%;
  opacity:0.15;
}
<section class="corpo-1">

  <img src="http://www.imagenspng.com.br/wp-content/uploads/2015/02/yoshi-super-mario-02.png"class="bg-transparente">
  <h1>Lorem ipsum dolor adipiscing<br />
            amet dolor consequat</h1>

  <p>Adipiscing a commodo ante nunc accumsan interdum mi ante adipiscing. A nunc lobortis non nisl amet vis volutpat aclacus nascetur ac non.
    <br/>Lorem curae eu ante amet sapien in tempus ac. Adipiscing id accumsan adipiscing ipsum.</p>

  <hr class="linha-titulo">
  <ul class="info">
    <li>
      <img src="http://davidnaylor.org/temp/thunderbird-logo-200x200.png"alt="" class="tamanho" />
      <h1>Lorem Ipsum Dolor</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
      <p>Vestibulum at purus sed erat suscipit.</p>
      <p>Cras facilisis viverra wisi. Class sociosqu...</p>
    </li>

    <li>
      <img src="http://davidnaylor.org/temp/thunderbird-logo-200x200.png"alt="" class="tamanho" />
      <h1>Lorem Ipsum Dolor</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
      <p>Vestibulum at purus sed erat suscipit.</p>
      <p>Cras facilisis viverra wisi. Class sociosqu...</p>
    </li>

    <li>
      <img src="http://davidnaylor.org/temp/thunderbird-logo-200x200.png"alt="" class="tamanho" />
      <h1>Lorem Ipsum Dolor</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
      <p>Vestibulum at purus sed erat suscipit.</p>
      <p>Cras facilisis viverra wisi. Class sociosqu...</p>
    </li>
  </ul>
  <br>
  <br>
  <br>
  <p class="text-center">
    <button id="btn-info">leia mais ...</button>
  </p>
</section>
    
asked by anonymous 21.05.2015 / 15:04

1 answer

1

The PAI element must be Position Relative . In the image that is as Position Absolute , you have to define the following CSS properties; 

left:0;
right:0;
margin: auto;
    
21.05.2015 / 15:23
Create new array with contents from another array Windows 7 Server with Mysql 4.1