Uso de position para botón flotante

Les comparto otras alternativas para posicionar el botón (quitando el margin-top):

Usando calc() también en top:

.header__title-container .header__button {
	position: absolute;
	top: calc(100% - 24px);
	left: calc(50% - 114.5px);
}

Usando translate():

.header__title-container .header__button {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -24px);
}

Si son unos enfermos de la simetria como yo jeje, se tiene que tomar el 50% del total del width del contenedor en este caso 229px y quedaria asi:
left: calc(50% - 114.5px);

Una forma más fácil de centrar al botón sería así:

    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
}```

Creo que es más sencillo, queda perfectamente alineado sin necesidad de hacer cálculos nosotros mismos.

A mí me daba problemas el icono down-arrow porque había descargado de Figma lo que pone #mdi_keyboard_arrow_down.
Descargando en su lugar donde pone Vector me queda como al profe.

Hola 😄

Espero terminar la escuela de desarrollo web creandole una pagina web a mi esposa

Vengo a ahorrarles dolores de cabeza
Tengan cuidado con los espacios en la opcion calc por que de lo contrario no tomara el estilo.

Les comparto info sobre la función CALC.

La función CSS Calc() permite realizar operaciones con los valores de propiedades CSS.
Se puede usar para operar con medidas, frecuencias, ángulos, tiempo, porcentajes, números y enteros.

Sintaxis:

/*Propiedad: calc ( expresión)*/
width: calc(100% - 80px);

Se pueden utilizar operaciones de suma (+), resta (-), multiplicación (*) y división (/). En el caso de la suma y resta, es necesario siempre dejar espacios en blanco (whitespaces) entre los valores para que no se generen errores.

Saludos comunidad

Leyendo los comentarios de la comunidad me di cuenta que mi proyecto corria peligro de romperse ya que todas mis unidades de medida estaban en rem, por lo que si el usuario hacia ajustes del tamaño de fuente en su navegador, todo el diseño seria distinto. Asi que cambie todas ellas a px de inmediato! pero… jugando con las dimensiones de fuente en el navegador (especificamente chrome) mi diseño se rompia igual, pero entendi el porque.
Cuando el font size del texto crece (al ajustar la configuracion del navegador) lo hace hacia abajo junto a su line height y el contenido puede quedar debajo de algun elemento flotante (como el boton del header en posicion absolute en este proyecto).
Usando esta linea de codigo css en el header:

height: 353px;

con una configuracion de mi browser de:

el proyecto se rompe de esta manera:

pero…

con este codigo en el header:

height: 35.3rem;

y la misma configuracion del navegador, el proyecto quedaba asi:

Por lo tanto podriamos concluir que…

De preferencia ajustar propiedades verticales que NO sean font-size usando rem.

Esto lo descubri jugando con el tamaño de fuente del navegador y las propiedades rem y px.
De seguro deben haber buenas practicas sobre el tema ahi fuera u optimizaciones para proyectos web a todo terreno. Si conoces mas informacion sobre el tema suma tu comentario, hagamos debate e intercambio de ideas. Ese conocimiento nos ayudara a todos!

Estilos .header--title-container .header--button:

  position: absolute;
  left: calc(50% - 118px);
  top: 270px;
  display: block;
  margin-top: 35px;
  padding: 15px;
  width: 229px;
  height: 48px;
  background: var(--off-white);
  box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
  border: none;
  border-radius: 4px;
  font-size: 1.4rem;
  font-weight: bold;
  text-decoration: none;
  color: var(--black);

Estilos .header--title-container .header--button span:

  display: inline-block;
  width: 13px;
  height: 8px;
  margin-left: 10px;
  background-image: url("../assets/icons/arrdown.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

Position absolute toma a position relative como padre directo y puede reposicionarse en cualquier parte del header.

Al principio de la clase creo que el profe se equivoco, pues si es posible usar top, right, left y bottom con position: relative y lo hace desde su punto original de su posicion, a diferencia de absolute que modifica el flujo de nuestro layout. Solo position: static no nos deja usar las 4 propiedades offset antes mencionadas (top, left, etc).

Si tienen problema con la imagen como la descargó Diego, les sugiero bajarla como Vector.svg

Bien!!! Genial!!

Veníamos _taaan _bien con las explicaciones y tuvo que aparecer un botón flotante con posición absoluta y ahora hay que hacer cálculos para que quede mitad acá y mitad allá. 😦

Alinear un botón con:
position: absolute;
left: calc(50% - 114.5px);
width: 229px;

/* Si solo ponemos left: 50%; pone el lado izquierdo de la caja en el centro, independientemente de cuanto (width) mida nuestra caja. Para que tome el centro de la caja como referencia para posicionar y no el lado izquierdo de la caja hay que hacer el calculo. Tomamos la mitad del Width de la caja, en este caso 114.5px y lo restamos con el 50%. Le estaríamos diciendo que la caja lo ponga a la mitad de la anchura de la ventana y que mueva 114.5 pixeles más a la izquierda ya que ahí es el centro de mi caja. */

Para centrar a la mitad el boton, se mueve desde la izquierda un 50%, pero el boton empieza en ese 50% por lo que tenemos que restar a este 50% la mitad del ancho de nuestro boton, en este caso:
229px/2 =114.5px

No me gusta usar tantos valores fijos en px preferiria utilizar rem o % entiendo para los min-width/max-width o algunos otros. Que piensan ustedes sobre el uso de unidades absolutas como px como lo esta haciendo el profesor?

Esta es mi solucion a el problema de centrar el boton usando margin

.header--button {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 20px;
    width: 229px;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--warm-black);
    border: none;
    border-radius: 5px;
    background-color: var(--off-white) ;
    /* Shadow */
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    transform: translateY(-24px);
}```

Yo lo hice con el display inline-flex y me ayudo a no tener que hacer cálculos, quedando centrado, solo agregando el tamaño y el margin.
Es mi aporte pero si alguien nota algún error me encantaría que me lo comentara

.header--container-button {
    display:inline-flex;
    justify-content: center;
    align-items: center;
    margin-top: 35px;
    width: 229px;
    height: 48px;
    font-size: 1.4rem;
    font-weight: bold;
    background-color: var(--off-white);
    color: var(--warm-black);
    text-decoration: none;
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    border-radius: 4px;
    
}

Les comparto el código de la clase:

.header--title-container .header--button {
    position: absolute;
    left: calc(50% - 114.5px);
    top: 270px;
    display: block;
    margin-top: 35px;
    padding: 15px;
    width: 229px;
    height: 48px;
    background-color: var(--off-white);
    /*Sombra*/
    box-shadow: 0px 4px 8px rgba(89,73,30,0.16);
    border: none;
    border-radius: 5px;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--black);
}
.header--button span {
    display: inline-block;
    width: 13px;
    height: 8px;
    margin-left: 10px;
    background-image: url('./assets/icons/down_arrow.svg');
}

Aquí les dejo la documentación que explica como se usa calc().
https://developer.mozilla.org/es/docs/Web/CSS/calc()

left: calc(50% - 114.5px);

Puede quedar de la siguiente manera para que sea justo la mitad de los 229px que se están usando en el width.

Esto les servirá para centrar el elemento sin tener que saber las dimensiones exactas del elemento:

    left: 50%;
    transform: translateX(-50%);

El transform lo que hace es mover el elemento respecto a su propio centro. En este caso yo indico que quiero moverlo en su eje X, un 50% de su ancho actual en dirección negativa, es decir, a la izquierda 👍

position absolute toma como referencia a su padre siempre y cuando el padre sea position relativa, caso contrario toma al padre mas cercano que tenga relative y si ninguno lo tiene toma como referencia html

Otra manera de posicionar elementos al centro con posicion absolute es:

position: absolute;
// Mueve en horizontal respento al contenedor relativo
left: 50%;	
// Retrocede el elemento respento a la mitad de su propio tamaño
transform: translateX(-50%);

Les puedo sugeriri usar los iconos de fontawesome con la siguiente cdn, esta debe ir entre las etiquetas <head></head>

<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

van a esta url
font awesome
y escogen los iconos que quieran usar y copian y pegan el html que simpre es una etiqueta <i> con las respectivas clases del icono.
Ejemplo:

<i class="fas fa-chevron-down"></i>

el 50% es para que el botón se posicione justo en la mitad de la pantalla, pero no centrado como queremos, sino que ahí comienza.
entonces hay que restarle a eso la mitad de lo que mide nuestro botón para correrlo más al centro.

Centrar es mas facil como :

display: inline-block;
position: absolute;
left: 50%;
bottom: 0;
transform: translate(-50%, 50%);

Yo utilice 115px en left: calc(50% - 115px);

Me pareció más centrado.

otro aporte al momento de usar calc en caso de querer sentrar el numero excato NOSOTROS lo debemos calcular el cual es sumar, todo lo q queda en el “eje inline” q seria el margin left y right al igual q el padding y si hubiera borde tambien y alli ese resultado dividirlo a la mitad y alli sale para hacer el calculo de left

cal(50% - xxx px)

Me gustó muchísimo esta clase. Aprendí bastante con la explicación del profe Diego. Sin palabras. 💚

Otra forma de hacerlo sería dividiendo el width del elemento por 2, por ejemplo;

.header--title-container .header--button {
	position: absolute;
	left: calc(50% - (229px / 2));
	top: 270px;
	display: block;
	width: 229px;
	height: 48px;
}

Como la tecnología BEM sugiere en lo posible no mezclar en un selector tags html con clases, he realizado la siguiente alternativa:
HTML

<header class="header">
    <img class="header__img" src="./assets/images/logo.svg" alt="Logo de Batatabin" />
    <div class="header__title">
        <h1 class="header__title__h1">La próxima revolución en el intercambio de criptomonedas</h1>
        <p class="header__title__p">Batatabit te ayuda a navegar entre los diferentes precios y tendencias</p>
        <div class="header__button">
            <a class="header__button__a" href="">Conoce nuestros planes</a>
            <spam class="header__button__icon"></spam>
        </div>
    </div>
</header>

CSS

.header{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    width: 100%;
    min-width: 320px;
    height: 334px;
    text-align: center;
    background: linear-gradient(207.8deg, var(--warm-black) 16.69%, var(--bitcoin-orange) 100%);
}

.header__img{
    width: 150px;
    margin-top: 60px;
}

.header__title{
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 218px;
    margin-top: 40px;
}

.header__title__h1{
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}

.header__title__p{
    margin-top: 25px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--soft-orange);
}

.header__button{
    position: absolute;
    top: 270px;
    left: calc((100% - 229px)/2);
    width: 229px;
    height: 48px;
    margin-top: 35px;
    padding: 15px;
    background-color: var(--off-white);
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(89,73,30,0.16);
    font-size: 1.4rem;
}

.header__button__a{
    font-weight: bold;
    color: var(--black);
    text-decoration: none;
}

.header__button__icon{
    display: inline-block;
    width: 13px;
    height: 8px;
    margin-left: 10px;
    background-image: url('../assets/icons/down-arrow.svg');
}

Espero que a alguien le sea útil

Si a alguien no le aparece la flechita al final, agreguen eun background-position:

.header--button span {
    display: inline-block;
    width: 13px;
    height: 8px;
    margin-left: 10px;
    background-image: url("./Assets/Icons/arrow_down.svg");
    background-position: center;
}

Para los que también quieran posicionarlo tipo pixel perfect:

• Vean el width del contenedor = 320px ( Equivale al 100%),
• La posición del botón en figma esta justo a 45px de izquierda a derecha.
• Apliquen regla de 3, si el 100% es 320px, 45px = 14.0625%.
  Esto colocara el botón justo en el punto exacto según el diseño.
   

.header--title-container .header--button{
    position: absolute;
    left: calc(14.0625%);

Para los que no le aparece la flechita, como comento otro compañero lo solucione con:
background-position: center;

Ese botón no esta para nada centrado, y si tienes un container flex, no le veo el caso de centrar de esa manera, cuidado que lo que mal se aprende, no se olvida.

Yo a mi proyecto le agregué un navbar con un menú.

• Implementamos display flex para usar column y posicionar el contenido de adentro como align self
• Box shadow para utilizar sombras
• Usar position para poder posicionar de la forma que queramos un elemento
• Usar gradient para tener un fondo difuminado

Hice unas pocas modificaciones para posicionar el botón de una forma más precisa.

.header--title-container .header--button {
  position: absolute;
  bottom: -24px; // Es más fácil tomar distancia desde abajo que desde arriba, lo ubiqué usando la mitad de la altura del botón
  left: 0;
  right: 0;
  margin: auto; // Esta y las dos declaraciones anteriores centran el botón horizontalmente
  padding: 15px;
  width: 229px;
  height: 48px;
  background-color: var(--off-white);
  box-shadow: 0 4px 8px rgba(89,73, 30, 0.16);
  border: none;
  border-radius: 5px;
  font-size: 1.4rem;
  font-weight: bold;
  text-decoration: none;
  color: var(--black);
}

De esta otra forma el boton puede quedar centrado cuando sale de la caja padre:
.header–title-container .header–buttom {
/* top: 270px; /
/ margin-top: 35px; */
bottom: -24px;
}

Al ingresar buttom “0” se posiciona al limite del padre, y si tomo la mitad del alto del tamaño del boton, se centra por fuera del div padre

Super 😃

Algo que me ha servido mucho con la función de cálcculo cuando quiero algo muy exacto y no quiero estar adivinando es lo siguiente:

.class {
	position: absolute;
	left: calc(50% - calc(100px / 2));
	width: 100px;
}

De manera que si mi ancho es de 100px y suponiendo que no quiero estar buscando cuanto es la mitad o simplemente no quiero hacerlo cada vez que cambie el ancho o alto, entonces uso la función calcular para sacar primero la mitad y luego esa mitad la resto al 50% del ancho de la caja.

Hasta ahora me ha gustado mucho el curso, he visto comentarios de personas que saben más y hacen sugerencias creo que esta perfecto siempre que sean constructivos.
Personalmente estoy empezando la escuela de desarrollo web y CSS hasta ahora me ha parecido complejo por lo amplio que es, con este curso he aprendido muchisimo y claro la idea es seguir practicando.

es increíble ver el resultado final del header 😄

Sería muy bueno que en alguna nueva revisión de CSS implementen alguna variable o función estilo self.width para poder utilizar mejor la función calc a la hora de centrar el botón.

Para los que no les sirve posicionar el button apliquen esto en su html

<div class=“header–button”><a href="" class=“header–button-a”>Conoce Nuestros Planes<span></span></a></div>

Y Esto va en el css

.header–title-conteiner .header–button {
position: absolute;
top: calc(100% - 24px);
left: calc(50% - 114.5px);

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Batata Bit</title>
  <link href=“https://fonts.googleapis.com/css2?family=DM+Sans:[email protected];500;700&family=Inter:[email protected];500&display=swap”
    rel=“stylesheet”>
  <link rel="stylesheet" href="./assets/styles/styles.css">
</head>
<body>
  <header class="header">
    <img class="header-img" src="./assets/img/logo.svg" alt="Logo de Batatabit" title="Logo de Batatabit">
    <div class="header-title-container">
      <h1>La próxima revolución en el intercambio de criptomonedas</h1>
      <p>Batatabit te ayuda a navegar entre los diferentes precios y tendencias</p>
      <a class="header-button" href="#">Conoce Nuestros Planes <span></span></a>
    </div>
  </header>
  <main>
    <section></section>
    <section></section>
    <section></section>
    <section></section>
  </main>
  <footer></footer>
</body>
</html>

:root {
  /* Colores */
  --bitcoin-orange: #f7931a;
  --soft-orange: #ffe9d5;
  --secondary-blue: #1a9af7;
  --soft-blue: rgb(231, 245, 255); 
  --warm-black: #201e1c;
  --black: #282623;
  --grey: #bababa;
  --off-white: #faf8f7;
  --just-white: #fff;
  --shadow-btn: #59491e29;
}

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html{
  font-size: 62.5%;
  font-family: "DM Sans", sans-serif;
}

.header {
  position: relative; // Esto es solo para que el botón flote
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-width: 320px;
  height: 334px;
  text-align: center;
  background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);

  &-img {
    width: 150px;
    height: 24px;
    margin-top: 39px;
    align-self: center;
  }

  &-title-container{
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 218px;
    margin-top: 36px;
    text-align: center;
    align-self: center;
    
    h1 {
      color: var(--just-white);
      font-size: 2.4rem;
      font-weight: bold;
      line-height: 2.6rem;
    }

    p {
      color: var(--off-white);
      font-size: 1.4rem;
      font-weight: 500;
      line-height: 1.8rem;
      margin-top: 32px;
    }
    
    .header-button {
      background: var(--off-white);
      border: none;
      border-radius: 5px;
      color: var(--warm-black);
      display: block;
      font-size: 1.4rem;
      font-weight: bold; 
      padding: 15px;
      text-decoration: none;
      height: 48px;
      width: 229px;
      position: absolute;
      top: calc(100% - (48px/2)); // 48 es el height
      left: calc(50% - (229px/2)); // 229 es el width
      box-shadow: 0 4px 8px var(--shadow-btn);

      span {
        display: inline-block;
        background: url('../icons/down-arrow.svg');
        margin-left: 10px;
        height: 8px;
        width: 13px;
      }
    }
  }
}

Para posicionar el botón y no realizar los calculos yo hice lo siguiente:

.header__title-container .header__button {
    position: relative;
    display: inline-block;
    top: 20px;
}

Al añadir la flecha la tenia torcida y lo solucione con display flex de la siguiente manera

.header--title-container .header--button {
    	.
	.
	.
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  	.
	. 
	.
}

Yo posicioné el botón de una manera muy diferente, les dejo mi código.

.header--title-container .header--button {
    position: relative;
    top: 2.6rem;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    background-color: var(--off-white);
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    width: 229px;
    height: 48px;
    color: var(--warm-black);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.4rem;
}

También quería hacer notar que el profesor no sigue siempre los tamaños que el diseño en Figma dicen, un ejemplo en concreto es el border-radious ¿Por qué le pone 5px si el diseño dice 4px? Me molesta que escoja de manera un poco antojadiza los tamaños, si tenemos un diseño predeterminado.

vamos progresando! ❤️

.header__title-container .header__button {
    position: absolute;
    left: calc(50% - 118px);
    top: 270px;
    display: block;
    margin-top: 35px;
    padding: 15px;
    width: 229px;
    height: 48px;
    background-color: var(--off-white);
    /* Sombra*/
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    border: none;
    border-radius: 4px;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--warm-black);
    text-decoration: none;
}
.header__button a {
   margin-left: 16px;
}
.header__button span {
    display: inline-block;
    width: 13px;
    height: 8px;
    margin-left: 14px;
    background-image: url("./assets/icons/mdi_keyboard_arrow_down.svg");
}

En el texto del boton, tuve que agregar flex porque no se veia centrado. Y la imagen la puse de 24x24

.header--title-container .header--button {
    position: absolute;
    top: 270px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-top: 35px;
    width: 229px;
    height: 24px;
    border: none;
    border-radius: 4px;
    padding: 12px 16px;
    background-color: var(--off-white);
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    font-size: 1.4rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--black);
    left: calc(50% - 130px);
}

.header--button span {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-left: 10px;
    background-image: url('./assets/icons/mdi_keyboard_arrow_down_3.svg');

}

Les comparto el uso de otras propiedades para obtener el mismo resultado en el botón

.header--button{
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    transform: translateY(50%);
    padding: 0 16px;
    width: 229px;
    line-height: 4.8rem;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--warm-black);
    background-color: var(--off-white);
    border-radius: 4px;
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    text-decoration: none;
}```

¡Este fue mi resultado final! Es más difícil de lo que parecía a simple vista jajaj. Para verse sencillo se requiere mucho conocimiento

Pronto lo modificaré con mis propios estilos!

En mi caso me aparecía el ícono de forma extraña y era que no había borrado la (i) del span

Muy interesante como hacer el landing page. Yo conozco un poquito de css y html pero no a este nivel. Nunca pares de aprender!

Quise realizar el ejercicio antes de empezar a ver esta clase y mi código resultó bastante similar, con algunas diferencias pero el mismo resultado. Acá lo comparto:

.header--button {
    /* Posicionamiento */
    display: flex;
    position: relative;
    justify-content: space-between;
    align-items: center;
    top: 19px;
    width: 229px;
    height: 48px;
    /* Modelo de caja */
    border: none;
    padding: 12px 16px;
    border-radius: 4px;
    /* Tipografía */
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.8px;
    text-decoration: none;
    color: var(--warm-black);
    /* Efectos visuales */
    background: var(--off-white);
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
}

.header--button span {
    background-image: url(./assets/icons/down-arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 15px;
    height: 7.41px;
}

ojeras?

Me encanto esta seccion, fue genial! Es un genio Diego 😃

.header--title-container a {
  position: absolute;
  left: calc(50% - 125px);
  width: 250px;
  display: block;
  /* bottom: -10%; */
  top: calc(100% - 34.5px);
  padding: 25px;
  background-color: var(--off-white);
  border-radius: 15px;
  /* sombras */
  box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
  font-size: 0.875rem;
  font-weight: bold;
  text-decoration: none;
  color: black;
}

Centrar un elemento con calc()

Centrar un elemento horizontalmente

Lo que hará el 50% es mover la parte izquierda del botón hacia el centro y luego se le resta la mitad del width de la caja para que se coloque al centro.

.botton{
	position: absolute;
	width: 150px;
	height: 100px;
	left: calc(50% - 150px/2);
}

Centrar un elemento verticalmente

Lo que hará el 50% es mover la parte de abajo del botón hacia la línea horizontal (bajar) y luego se le resta la mitad del height de la caja para que se coloque al centro (suba).

.botton{
	position: absolute;
	width: 150px;
	height: 100px;
	top: calc(50% - 100px/2);
}

Si deseas centrar el elemento en función de su contenedor padre solo debes de cambiar el valor de position de absolute a relative.

Recuerda que HTML trabaja en el cuarto cuadrante

USO DEL calc()

Es una función la cual realiza operaciones aritméticas (+, -, *, /)

/*Su width será del 100% menos 15 pixeles*/
div{
    width: calc(100% - 15px);
}

Sintaxis errónea

Recordar que las dos cantidades a operar deben de estar separadas del signo:

/*Incorrecto*/
calc(50%-15px)  
calc(50%- 15px)  
calc(50% -15px)  

/*Correcto*/
calc(50% -15px)

Más información: https://developer.mozilla.org/es/docs/Web/CSS/calc()

🤖asi fue como yo lo hice .
use mayormente el display: flex; y trate de mantener el codigo al minimo y lo mas simple que pude.

/*
    1. posicionamiento.
    2. modelo de caja.
    3. tipografia.
    4. estilos visuales (efectos como sombras y bordes).
    5. otros.

*/

:root {
    /*colores*/
    --bitcoin-orange: #F7931A;
    --soft-orange: #FFE9D5;
    --secondary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warm-black: #201E1C;
    --warm-black1: #282623;
    --grey: #bababa;
    --off-white: #FAF8F7;
    --just-white: #ffffff;
}

* {
    box-sizing: border-box;
    margin: 0px;
    padding: 0px;
}

html {
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}
header {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 320px;
    height: 334px;
    text-align: center;
    align-items: center;
    background: linear-gradient(207.8deg, var(--warm-black) 16.69%, var(--bitcoin-orange) 100%);
}

header img {
    width: 151px;
    height: 24px;
    align-self: center;
}

.header--title-container {
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    margin-top: 55px;
    height: 218px;
}

.header--title-container h1 {
    font-weight: 700;
    font-size: 2.4rem;
    line-height: 2.6rem;
    color: var(--just-white);
}

.header--title-container p {
    margin-top: 24px;
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.8rem;
    color: var(--soft-orange);
}

header a {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    width: 229px;
    height: 48px;
    position: absolute;
    top: 305px;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.4rem;
    background-color: var(--off-white);
    color: var(--warm-black1);
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    border-radius: 4px;
    border: none;
}

header a span img {
    width: 1.2rem;
    height: 0.741rem;
}

Yo use esta propiedades para posicionarl

left: 50%;
 transform: translate(-50%,0);

Aqui les dejo parte de los estilos, tuve un error al momento de aplicar calc y pude solucionar a travez de los aportes que hizo un compañero

.header--title-container .header--button{
    position: absolute;
    /*left: calc(50%-118px); me salio un error no aplica el estilo*/
    top: 270px;
    display: block;
    margin-top: 35px;
    padding: 15px;
    width: 229px;
    height: 48px;
    background-color: var(--off-white);
    box-shadow: 0px 4px 8px rgba(89, 73, 70, 0.16);
    border: none;
    border-radius: 5px;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--black);
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.header--button span{
    display: inline-block;
    width: 13px;
    height: 8px;
    margin-left: 10px;
    background-image: url('./assets/icon/arrow_down.svg');
}

En caso de que no se aplique el estilo siguiente:

left: calc(50% - 118px);

tienen que tener cuidad de que el signo “-” (menos) tenga espacios antes y después.

Tardé un rato en ver ese error. 😅

Compañeros de platzi, trate de hacer una replica (no exacta, colocando colores que me gustaban) tratando de ver el video o el código ya hecho lo menos posible…

Aun tengo dudas en lo siguiente, mas que todo en las posiciones:

¿por que se usa la position relative para el header y el display flex y el flex-direction:colum?

Comparto mi manera de posicionar el bóton de manera simétrica:

.header--title-container .header--button {
	position: absolute;
	right: 50%;
	bottom: 0;
	transform: translate(50%, 50%)
}

De esta manera, se colocará el botón donde queremos independientemente del tamaño del contenedor padre o del tamaño del hijo.

Uso de box-shadow

Ejemplo:

box-shadow:  3px  5px 10px red;

1. (3px)El primer valor determina la posición de la sombra en el eje “x” de la caja a la que se le quiere aplicar sombra.
2. (5px) Determina la posición en el eje “y”.
3. (10px) Define el difuminado que va a tener la sombra.
4. (red) El cuarto determina el color de la sombra.

También puedes usar números negativos para mover la sombra hacia arriba o hacia la izquierda.

Otro ejemplo con valores diferentes:

box-shadow:  -3px  -5px 20px rgb(53, 12, 235); 

Existen muchas manera de dar estilos a nuestra pagina, referente al .header–button una de las tantas que existen y que en lo personal me gusta mas, por que trabajas con porcentajes únicamente es:

.header--button {
    left: 50%;
    transform: translateX(-50%);
}

Hola! Cuando coloque el ícono de down, se repetía o me quedaba posicionado muy alto en relación al texto, lo solucion{e así:
background-position: center;
background-repeat: no-repeat;

Le hice unos cambios al header .

12:15 minutos de invaluable información. y lo que falta!!!

Comentario. Alt+Shift+A

Uso de la función Calc()

Lei en MDN que es mejor definir sin borde con border: 0; por temas de optimizacion

Aqui os dejo el CSS para el span:

.header-button span{
display: inline-block;
width: 13px;
height: 8px;
margin-left: 10px;
background-image: url(’…/assets/icons/down-arrow.svg’);
}

Generador de sombras de MDN Web Docs

Me parece más práctico usar la etiqueta <img> para el ícono del botón (dentro del el span)
.
Pero eso trae este problema:

esto se soluciona cambiando el selector que asigna el margen al logo de batabit de esto:

header img
{
    width: 150px;
    height: 24px;
    margin-top:60px
}

a esto:

header > img
{
    width: 150px;
    height: 24px;
    margin-top:60px
}

Esto hace que nuestros estilos no afecten a nuestro botón.

El resultado queda así:
.

.
Cuentame como te parece esta opción o si se te ocurre otra mejor 😄 💚

Vamos bien…

Les comparto otra forma de centrar el boton sin tener que usar el calc:

.header--tittle-container .header--button {
    /* 1. Posicionamiento  */
    position: absolute;
    top: 270px;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

Podemos calcular el “left” de la forma:
calc(50% - [valor del width/2])
para ser más exactos

/*

1. Posicionamiento
2. Modelo de caja (box model)
3. Tipografia
4. Visuales
5. Otros
   */

:root {
/* Colores */
–bitcoin-orange: #F7931A;
–soft-orange: #FFE9D5;
–secondry-blue: #1A9AF7;
–soft-blue: #E7F5FF;
–warn-black: #201E1C;;
–black: #282623;
–grey: #BABABA;
–off-white: #FAF8F7;
–just-white: #FFFFFF;
}

• {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }

html {
font-size: 62.5%;
font-family: ‘DM Sans’, sans-serif;
}

header {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
min-width: 320px;
height: 334px;
text-align: center;
background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
}

header img {
width: 150px;
height: 24px;
margin-top: 60px;
align-self: center;
}

.header–title-container {
width: 90%;
min-width: 288px;
max-width: 900px;
height: 218px;
margin-top: 40px;
text-align: center;
align-self: center;
}

.header–title-container h1 {
font-size: 2.4rem;
font-weight: bold;
line-height: 2.6rem;
color: var(–just-white);
}

.header–title-container p {
margin-top: 25px;
font-size: 1.4rem;
font-weight: 500;
line-height: 1.8rem;
color: var(–soft-orange);
}

.header–title-container .header–button {
position: absolute;
left: 0;
right: 0;
margin-right: auto;
margin-left: auto;
top: 270px;
display: block;
margin-top: 35px;
padding: 15px;
width: 229px;
height: 48px;
background-color: var(–off-white);
/* Sombra */
box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
border: none;
border-radius: 5px;
font-size: 1.4rem;
font-weight: bold;
text-decoration: none;
color: var(–black);
}

.header–button span {
display: inline-block;
width: 13px;
height: 8px;
margin-left: 10px;
background-image: url(’…/assets/icons/down-arrow.svg’);

}

Mejor centrar el botón así :

left: 0;
right: 0;
margin-right: auto;
margin-left: auto;

Hola, aquí una herramienta para generar sombras tipo drag and drop https://www.cssmatic.com/es/box-shadow

usar .header–button ya es muy especifico, no hay necesidad de usar todo : .header__title-container .header__button , esto es justo lo que bem trata de eliminar. 😄

Para la gente obsesiva como yo.
El background tiene un alto de 295px no de un 334px pues ahí coge lo que viene por defecto del smarphone.

Me siento un rebelde y anti-sistema usando posición absoluta y px.

👌

left: calc(50% menos practicamente la mitad en pixeles de lo que mide tu elemento)

Pequeñas cosas que cuando las analizas aprendes. :mind-blowing:

que genial ver como toma vida! grande @degranda !

De locos lo que hizo con la función calc();

Donde le doy me encanta cx

siempre quise saber como se configura un elemento flotante en secciones, muy buen dato, todo claro.

excelente lo pude hacer vamos con todo diego

¡Que bonito que ha quedado!
Estoy muy feliz cursando este curso y todo lo que se va aprendiendo esta super increíble 😄

Les comparto mi código!

.header__button{
    display: block;
    width: 229px;
    height: 48px;
    margin-top: 35px;
    padding: 15px;
    position: absolute;
    top: 270px;
    left: calc(50% - 114.8px);
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    border: none;
    border-radius: 5px;
    background-color: var(--off-white);
    font-size: 1.4rem;
    text-transform: capitalize;
    text-decoration: none;
    color: var(--warm-black);
    font-weight: bold;
}

.header__button span{
    display: inline-block;
    background-image: url('../assets/icons/vector.svg');
    width: 13px;
    height: 8px;
    background-repeat: no-repeat;
    margin-left: 10px;
}

header{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 32rem;
    height: 33.4rem;
    text-align: center;
    background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
}
header img{
    width: 15rem;
    height: 2.4rem;
    margin-top: 6rem;
    align-self: center; /*Es por el flex*/
}
.header--title-container{
    width: 90%;
    min-width: 28.8rem;
    max-width: 90rem;
    height: 21.8rem;
    margin-top: 4rem;
    text-align: center;
    align-self: center; /*Es por el flex*/
}
.header--title-container h1{
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--just-white);
}
.header--title-container p{
    margin-top: 2.5rem;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    color: var(--soft-orange);
}
.header--title-container .header--button{
    position: absolute;
    top: calc(100% - 2.4rem);
    left: calc(50% - 11.45rem);
    display: block;
    padding: 1.5rem;
    width: 22.9rem;
    height: 4.8rem;
    background-color: var(--off-white);
    /*Sombra*/
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    border: none;
    border-radius: .5rem;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--black);
}
.header--button span{
    display: inline-block;
    width: 1.3rem;
    height: .8rem;
    margin-left: 1rem;
    background-image: url('./assets/icons/down-arrow.svg');
}

El icono no me funcionó pero bueno, tocó omitirlo porque no encuentro el porque no sale 😥

Recuerda que si estas en una carpeta css, debes usar los dos puntos para salirte de la carpeta y entrar en la correcta donde está el archivo. puede pasar. saludos :v