Выравнивание div (c position: absolute;)

@Маргарита161 · Регистрация: 25.06.2015

Author24 — интернет-сервис помощи студентам

Добрый день! Уже почти доделала сайт, но подводит одна штука! Помогите пожалуйста, я новенькая в этом деле...
Есть круг (картинка), который находится на слайдере. И я никак не могу заставить этот круг стать резиновым, чтобы при изменении в размере экрана он оставался посередине.
Вот код:

HTML5

<li>
    <div class="overlay"></div>
       <img src="https://www.cyberforum.ru/images/templatemo_slide_1.jpg" alt="Special 2">(фон)
          <div class="container">
               <div class="row">
                   <div class="col-md-5 col-lg-4">
            <div id="box">
                <img src="https://www.cyberforum.ru/images/главная.png" alt="Special 2">(круг)
             </div>
                   </div>
               </div>
           </div>
     </li>

CSS:

CSS

#box {
    position: absolute;
    margin-left: 55%;
    padding: 45px;
    bottom: 900px;
    width: 180%;
    height: 180%;
    z-index: 10;
 
}

@Xteda · 25.06.2015, 16:17

CSS

1	transform: translateX(-50%)

к трансформу добавить, по-необходимости, префиксы: -webkit-, -ms-
убрать margin-left и поставить left: 50%;

@Маргарита161 · 25.06.2015, 16:22 **[ТС]**

Xteda, съехало сильно влево, прям около края теперь. А с телефона когда открываю сайт, то вообще пропадает круг.

@Xteda · 25.06.2015, 16:38

Значит что-то не так с вашими стилями. Особенно меня смущает ширина и высота по 180%. Как подсказывает мне опыт, это скорее всего какой-то костыль, а не обдуманное решение
http://codepen.io/chriscoyier/pen/BvdgL

HTML5

1
2
3

<div>
  Percentage sized and still centered.
</div>

CSS

body {
  background: #900;
}
 
div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
  /*
  This doesn't work
  margin-left: -25%;
  margin-top: -25%;
  */
  
  width: 40%;
  height: 50%;
 
  padding: 20px;  
  background: red;
  color: white;
  text-align: center;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
}

Комментарий администратора

Правила форума пункт 5.19
Запрещено размещать ссылки на коды программ, расположенные на других сайтах. Коды программ должны размещаться на форуме.
Ссылка на песочницу - это бонус.

@Маргарита161 0 / 0 / 0 Регистрация: 25.06.2015 Сообщений: 8
	25.06.2015, 16:22 [ТС]	3
	Xteda, съехало сильно влево, прям около края теперь. А с телефона когда открываю сайт, то вообще пропадает круг. 0

	25.06.2015, 16:38

Опции темы