Как центрировать треугольник CSS без использования flexbox?

Question

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

.arrow-down {
  display: inline-block;
  border-top: 4px solid #838990;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}

Контейнер div представляет собой квадрат с установленной шириной / высотой.НО это не использует flexbox.Если я могу использовать flexbox, тогда align-items: center; justify-content: center; может сделать трюк, но без flexbox это сложно.

Например, margin: auto; или left:50% не сделают этого.Но странным образом установка position: absolute; left:50%; top:50%; может центрировать его по вертикали.Не уверен, почему он может делать это только по вертикали.

----- update -----

Из полученного ответа добавьте transform: translate(-50%,-50%);, но почему?

Answer 1

Дайте следующее свойство css:

.arrow-down{
display: inline-block;
border-top: 4px solid #838990;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transform: -webkit-translate(-50%,-50%);
transform: -o-translate(-50%,-50%);
transform: -moz-translate(-50%,-50%);
transform: -mz-translate(-50%,-50%);

}

и добавьте "position: относительный" к внешнему div.

Answer 2

Почему transform translate работает :

В добавление к ответу Фахима Хана, использование transform: translate(-50%,-50%); помогает, потому что когда вы используете left: 50% и top: 50%, вы в некотором смысленачиная горизонтально с 50% слева и 50% сверху, но без учета ширины и высоты самого треугольника.

Вы можете думать об этом так, чтобы понять это: давайте предположим, что ширина контейнера равна 100px, а ширина треугольника - 40px.Браузер начинает рисовать треугольник с 50-го пикселя, а затем он расширяется до 90-го пикселя.То же самое происходит вертикально.

Здесь мы не учитываем ширину и высоту самого треугольника.Чтобы исправить это, нам нужно начать с 30-го пикселя, это будет означать, что треугольник закончится на 70-м пикселе, поместив его прямо в центре.Для этого мы используем transformX (-50%) =>, что означает «переместить мое тело на 50% вверх», и translateX (-50%) =>, что означает «переместить мое тело на 50% влево».

В заключение, вот что необходимо расположить его в центре для дочернего элемента:

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

А для родительского элемента не забудьте добавить: position: relative;

Answer 3

Вот как вы добавляете стрелки, используя псевдо-классы. Я сделал их по центру, используя таблицу.

.bg-green {
  display: table;
  background: #0f0;
  height: 50px;
  width: 100%;
  text-align: center;
}
.arrow {
  position: relative;
  display: table-cell;
  height: 10px;
  width: 10px;
}
.arrow::before {
  content: '';
  position: absolute;
  right: 50%;
  top: 50%;
  border: 4px solid #000;
}
.arrow.up::before {
  border-top-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}
.arrow.down::before {
  border-bottom-color: transparent;
  border-left-color: transparent;
  border-right-color: transparent;
}
.arrow.right::before {
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-right-color: transparent;
}
.arrow.left::before {
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
}

<div class="bg-green">
  <span class="arrow up"></span>
  <span class="arrow down"></span>
  <span class="arrow left"></span>
  <span class="arrow right"></span>
</div>

Answer 4

  .parent{
    text-align: center;
    width:100%;
    height:100vh;
    position:relative;
    display: table;
  }
  .row{
    display: table-cell; 
    vertical-align:middle;
    text-align: center; 
    width:100%;
  }
  .arrow-down {  
    border-top: 4px solid #838990;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent; 
    display:inline-block;

  }
<div class="parent">
  <div class="row">
   <div class="arrow-down"></div>
  </div>
</div>

Answer 5

Пожалуйста, попробуйте этот код

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.box{
			height: 200px;
			width:200px;
			background-color: #dddddd;
			text-align: center;
			position: relative;
		}
		.arrow-down {
			display: inline-block;
			border-top: 4px solid #838990;
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			transform: translateY(-50%) translateX(-50%);
			top: 50%;
			position: absolute;
			left: 50%;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="arrow-down"></div>
	</div>
</body>
</html>