вертикального выравнивания «кнопка»

Question

I've сделал прозрачный «кнопку» и поместите его на Полноширинный фоновое изображение Я использую класс в <a> Я хотел бы, чтобы кнопка по центру ответно на изображении. Я сделал это горизонтально, но не точно вертикально. (Моя идея заключается в том, чтобы сделать одну страницу напечатать страницу) Вот HTML-код:

<div class="container"> 
      <div class="nav">nav area</div> 
      <div class="bg-image"> 
       <a class="button-transp abs" href="#">Butt text<br>second line<br>third</a> 
       <img src="bg_top.jpg"> 
       <h1>This is centered text.</h1> 
      </div> 
      <div class="main">main area</div> 
</div> 

СМЧ

.abs { 
    position: absolute; 
    z-index: 2; 
margin: 25% auto 0; 
    left: 0; 
    right: 0; 
} 
.button-transp { 
    display: inline-block; 
    min-width: 170px; 
    max-width: 500px; 
    width: 30%; 
    padding: 8px; 
    color: #fff; 
    background-color: transparent; 
    border: 2px solid #fff; 
    text-align: center; 
    outline: none; 
} 

Я использую поле: 25% авто 0; чтобы получить что-то рядом с правом.

Answer 1

Вы хотели, чтобы кнопка оставалась центра реагировать на изображение, которое в этом случае должно использоваться background image. Затем расположите кнопку, чтобы быть 50% от верхнего, 50% от левого и тянуть его обратно -1/2 его высоты к началу и -1/2 его ширины влево , Выполняя это, чтобы принудительно использовать кнопку, чтобы всегда оставаться в центре bg-image.

<div class="container"> 
    <div class="nav">nav area</div> 
    <div class="bg-image"> 
     <a class="button-transp abs" href="#">Butt text<br>second line<br>third</a> 
     <h1>This is centered text.</h1> 
    </div> 
    <div class="main">main area</div> 
</div> 

.abs { 
    position: absolute; 
    z-index: 2; 
    top: 50%; 
    margin-top: -37px; /** the button height is 74, so pull it half to the top the make the gap top and bottom equal */ 
    left: 50%; 
    margin-left: -95px; /** again, full button width/2 */ 
} 
.button-transp { 
    display: inline-block; 
    min-width: 170px; 
    max-width: 500px; 
    width: 30%; 
    padding: 8px; 
    color: #fff; 
    background-color: transparent; 
    border: 2px solid #fff; 
    text-align: center; 
    outline: none; 
} 
.bg-image { 
    background: url(http://www.online-image-editor.com//styles/2014/images/example_image.png) no-repeat 0 0; 
    width: 475px; 
    height: 360px; 
    position: relative; 
} 

См fiddle

Answer 2

Я сокращенная структуру, но этот вариант будет работать для любой кнопки размера и всегда будет центром как по горизонтали, по вертикали &.

CSS3 преобразования в основном IE9 и выше (соответственно приставкой в ​​соответствии с требованиями)

.bg-image { 
 
    height: 200px; 
 
    background: orange; 
 
    position: relative; /* positioning contexr */ 
 
} 
 

 
.button-transp { 
 
    width: 30%; 
 
    white-space:nowrap; 
 
    padding: 8px; 
 
    color: #fff; 
 
    background-color: transparent; 
 
    border: 2px solid #fff; 
 
    text-align: center; 
 
    outline: none; 
 
    position: absolute; 
 
    z-index: 2; 
 
    top:50%; 
 
    left: 50%; 
 
    transform:translate(-50%,-50%); 
 
}

<div class="container"> 
 
    <div class="bg-image"> 
 
     <a class="button-transp abs" href="#">Butt text<br/>second line<br/>third</a> 
 
    </div> 
 
</div>