Как центрировать кнопку по вертикали, относительно области просмотра в браузере?

Question

[VokERton]

Доброго времени.

Пытаюсь центрировать кнопку по вертикали, относительно области просмотра в браузере.

Код боковой кнопки:

<style>
 #order {
 position: fixed; 
 right: 0;
 top: 0; 
 }
 .rotated {
 writing-mode: tb-rl;
 transform: rotate(-180deg);
 }
</style>
<p class="buttond;" data-options="right, slide-down,size32,eachCounter1,eachCounter-right,counter0,upArrow-right;"><a class="rotated" target="_self" style="letter-spacing: 0.2em; cursor: pointer; font-size:15.4px; text-decoration: none; padding:15px 20px; color:#ffffff; background-color:#498BFA; border-radius:0px; border: 0px solid #ffffff;" onmouseover="this.style.backgroundColor='#7BABFB';" onmouseout="this.style.backgroundColor='#498BFA';" href="javascript:;" onclick="openchat();" id="order" letter-spacing: 0.2em;>ЗАКАЗ в 1 КЛИК</a></p>
<script type="text/javascript">function openchat(){new _uWnd('chat','Заказ в 1 клик',500,100,{align:0,shadow:0,close:1,autosize:1,maxh:600,minh:100,modal:1,resize:0,nomove:1}, $("#chat").html() )}</script> 
<div style="display:none;" id="chat">$MFORM_3$</div>

Прошу подсказки...

Comments

[Lara B]

если я правильно поняла, то Вам надо,чтобы кнопка всегда была по центру по вертикали и справа или слева от экрана?

[Rustam Bainazarov]

По середине обеих осей:


Только по горизонтали:

[VokERton]

Lara B, все верно поняли. Нужно по правой стороне.

[Lara B]

Anatoly, тогда кнопке в css стилях задаете вот такие свойства position: fixed; z-index: 999; top: 50%; right: 30px; transform: translateY(-50%);
position: fixed; - зафиксирует кнопку в окне, чтобы при скролле никуда не уезжала
top: 50%; - зафиксирует правый верхний угол кнопки относительно окна браузера по центру
right: 30px; - соответственно, отодвинет кнопку от правогой стороны на 30 пикс, или сами подберете нужное значение, 30 я дала просто, для примера
transform: translateY(-50%); - сделает так, что в центре будет не правый угол кнопки , а именно середина кнопки
z-index: 999; - сделает так, что кнопка будет поверх всех элементов на странице

[VokERton]

Lara B, Спасибо. Подскажите, а что бы углы только с правой стороны закруглить немного нужно использовать это?

border-top-right-radius: 25px;
border-bottom-right-radius: 25px;

[Lara B]

Anatoly, можно вот так, одной строкой
border-radius: 0px 25px 25px 0px ;

идет обход по часовой стрелке с левого верхнего

Answer 1

[VokERton]

Всем огромное, спасибо. Вопрос закрыт. Доработал с учетом ваших комментариев.

Вот что получилось:

<style>
 #order {
 position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
 }
 .rotated {
 writing-mode: tb-rl;
 transform: rotate(-180deg);
 }
</style>
<p class="buttond;" data-options="right, slide-down,size32,eachCounter1,eachCounter-right,counter0,upArrow-right;"><a class="rotated" target="_self" style="letter-spacing: 0.2em; cursor: pointer; font-size:15.4px; text-decoration: none; padding:15px 20px; color:#ffffff; background-color:#498BFA; border-radius:0px; border: 0px solid #ffffff;" onmouseover="this.style.backgroundColor='#7BABFB';" onmouseout="this.style.backgroundColor='#498BFA';" href="javascript:;" onclick="openchat();" id="order" letter-spacing: 0.2em;>ЗАКАЗ в 1 КЛИК</a></p>
<script type="text/javascript">function openchat(){new _uWnd('chat','Заказ в 1 клик',500,100,{align:0,shadow:0,close:1,autosize:1,maxh:600,minh:100,modal:1,resize:0,nomove:1}, $("#chat").html() )}</script> 
<div style="display:none;" id="chat">$MFORM_3$</div>

Answer 2

[Алексей]

Можно так, будет всегда по середине по вертикали

.button {
  position: fixed;
  top: 0;
  bottom: 0;
}