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.

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!

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.

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).

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 👍

Bien!!! Genial!!

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

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;
    
}

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

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á. 😦

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?

Recuerden quitar la i que está dentro de la etiqueta span, me demoré 10 minutos en descifrar la razón por la cual mi flecha se veía como una runa vikinga. 🤦‍♂️

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. */

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);
}```

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.

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

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.

Para la centrada horizontalmente me gusta más utilizar la siguiente propiedad:

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

De esta forma si el botón cambia de tamaño por cualquier motivo (cambió el texto, cambió el tamaño de letra, cambió el tamaño del icono, etc.), no es necesario tener que volver a manipular el valor de la propiedad de CSS.

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');
}

Hay un mejor forma de centrar un elemento cuando se utiliza position absolut.

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

🤖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;
}

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;

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

Solo para tener en cuenta:
Mal

left: calc(50%-118px);

Bien

left: calc(50% - 118px);

Siempre se debe dejar un espaciado entre el signo menos

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%);

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>

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.

Cuando realice el ejercicio no se veía el icono de la flecha hacia abajo, lo solucione con la siguiente línea de código:
background-position: center;

Bueno así va el proyecto:

El html:

<header class="cabezera">
      <div class="cabezera__titulo-headear">
        <img src="/assets/img/logo.svg" alt="logo Batatabit" />
      </div>

      <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>

      <button class="cabezera--planes">
        Conoce Nuestros Planes

        <img src="./assets/icons/down-arrow.svg" alt="flecha abajo" />
      </button>
    </header>

El css:

@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  text-align: center;
  font-family: "DM Sans", sans-serif;
}

/* colores */
/* tamaño de fuentes */
.cabezera {
  position: relative;
  display: grid;
  place-content: center;
  top: 0;
  height: 50vh;
  min-width: 340px;
  background-image: linear-gradient(to left bottom, #282523, #5a3e27, #8c5828, #c17525, #f7931a);
}
.cabezera .cabezera__titulo-headear {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-block-end: 2.8rem;
}
.cabezera .cabezera__titulo-headear img {
  width: 20rem;
}
.cabezera h1 {
  margin: 0 24px;
  font-size: 2.8rem;
  color: #fff;
}
.cabezera p {
  padding: 1.2rem 2.8rem;
  font-size: 1.6rem;
  color: #ffe8d5;
}
.cabezera .cabezera--planes {
  justify-self: center;
  position: absolute;
  bottom: -2%;
  border: none;
  border-radius: 8px;
  padding: 1.2rem 2rem;
  width: 30rem;
  font-size: small;
  font-weight: bold;
  color: #282523;
  background-color: #ffe8d5;
  box-shadow: -1px 4px 10px -5px;
}/*# sourceMappingURL=main.css.map */

No sé si a alguien como a mí le estaba pasando algo… por un espacio no me centraba el botón :’( tenía buen rato tratando de encontrar el error JAJAJA

.header--title-container .header--button {
    position: absolute;
    left: calc(50% - 110px);
    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-radius: 4px;
    border: none;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--black);
}

Me sorprendió el uso de left: calc(50% - 114.5px);
súper para aprender a centrar

Yo use esta propiedades para posicionarl

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

Hola, yo lo centre de esta manera

Hola, yo lo centre de esta manera

.header--title-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.header--button{
	position: absolute;
  	bottom: -24px;
 }

lo bueno de estos cursos para las personas que estamos empezando en esto; es que ajuro tenemos que aprender, lo hacemos cuando vemos el video, lo hacemos cuando se lee los recursos que trae cada video y luego con los conocimientos que hacen en los aportes que son fabulosos…miles de formas de hacer lo mismo …varias formas de centrar un boton… todas funcionan, todas las probe…que bueno es estudiar con personas que tienen experiencia y las comparten…gracias por sus aportes

Generador de sombras de MDN Web Docs

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

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); 

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;
}

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.

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');
}

Le hice unos cambios al header .

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?

¡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!

Creo que es más facil hacerlo asi:

header{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.header__btn{
    margin-bottom: -40px;
}

Sin importar cual sea la altura del header el boton siempre esta flotando entre las 2 secciones.

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. 💚

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 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:wght@400;500;700&family=Inter:wght@300;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;
}```


/* position absolute toma como referencia a su padre siempre y cuando el padre este posicionado, caso contrario toma al padre mas cercano y si ninguno lo tiene toma como referencia html */

Otra forma de desbordar el botón y mantenerlo centrado es esta:
El contenedor del botón debe tener position relative.

    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    padding: 10px 20px;
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--color-neutro-claro);
    text-decoration: none;
    border-radius: 4px;
    background-color: var(--color-principal);

de echo no explica como se usa las sombras en box-shadow pero lo invito que busque en youtub hay muy buen contenido explicando cada parte de los valores y como funciona

Para: Florencia Urquiza y a todo aquel que le sea util.

Sabemos cuantos pixeles hay que restar si dividimos entre 2 el ancho para centrarlo horizontalmente y/o el alto para centrarlo verticalmente.

Sí quieren ver que tan bien alineada esta quedando su pagina, cuanto mide algo. Hay dos extensiones para chrome muy útiles:

-Page Ruler: Es una regla, bastante útil para medir cualquier cosa en pixeles.

-PageLiner: Crea líneas de guía para alinear elementos, muy útil para tener una mejor conciencia espacial y corregir el posicionamiento.

buenas, capaz a ninguno le paso pero con la función calc pongan separados los numero del signo de resta
así
calc (50% - 118px)
no sé porque de la siguiente manera no te da bola
calc (50%-118px)

Si introuduces la imagen en el html, de esta manera:

<a href="#" class="header__link">Conoce Nuestros Planes <span class="header__img-link"><img src="assets/icons/down-arrow.svg" alt="flecha desplegable"></span></a>

Luego basta con ponerle un display flex la clase “header__link” y alinearlo, te ahorras unas cuantas lineas de código 😃

.header__link {
    position: absolute;
    bottom: -2.5rem;
    left: calc(50% - 11.4rem);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    background-color: var(--off-light);
    color: var(--dark);
    border-radius: .5rem;
    box-shadow: 0 4px 8px rgb(89 73 30 / .16);
}

:root {
    --bitcoin-orance: #F7931A;
    --soft-orange: #FFE9D5;
    --secondary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warm-black: #201E1C;
    --black: #282623;
    --grey: #BABABA;
    --off-white: #FAF8F7;
    --just-white: #FFF;
}

* {
    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;
    align-items: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: 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,38,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');
}

Con aportes de los comentarios, así fue como centré la etiqueta <a> :

// agregue esto al title-container porque mi texto no se centraba por algún motivo xd
.header__title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header__title-container .header__button {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    position: absolute;
    bottom: 0;
    transform: translateY(50%);
}

Esta es la manera más limpia de central el button:

.header--title-container .header--button {
    position: absolute;
    top: 270px;
    left: 0;
    right: 0;
    margin: auto;
}

Les comparto como lo hice yo:

<code> 
    left: calc(50% - 114.5px);
    bottom: 0;
    transform: translateY(50%);
/* La parte de bottom y transform la pueden reemplazar tambien por: */
   top: calc(100% - 24px); 

Explicación: Lo que sucede es que al utilizar left: 50%; se va a alinear el elemento (botón) en el 50% del contenedor pero comenzando desde donde inicia el botón, por esto lo que debemos hacer es ver: cuanto mide en total el elemento (en este caso 229px) lo dividimos /2 y nos da 114.5px este valor se lo restamos al calculo para que si el centro del elemento sea el que queda alineado al 50%.
Espero haberme hecho entender, saludos!

Creo que el profe en el curso de html y css nos enseñó que era una mala práctica llamar las imagenes desde css.

Asi que hice unos cambios y para evitar que la etiqueta img del header alterará la otra etiqueta (especificidad), en vez del span que pone el profe.
Acá dejo mi propuesta:

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

/* en vez de: */

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

/* y */

.header--button img {
    display: inline-block;
    width: 13px;
    height: 8px;
    margin-left: 10px;
}

/* en vez de */

.header--button img {
    display: inline-block;
    width: 13px;
    height: 8px;
    margin-left: 10px;
}

y en el HTML:

    <header>
        <img class="logo" src="./assets/imgs/Logo.svg" alt="">
        <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 href="/" class="header--button">Conoce Nuestros Planes <img src="./assets/icons/arrow-down.svg" alt=""></a>
        </div>
    </header>

en vez de:

    <header>
        <img src="./assets/imgs/Logo.svg" alt="">
        <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 href="/" class="header--button">Conoce Nuestros Planes <span></span></a>
        </div>
    </header>

Para tener todo los llamados desde HTML. Pues en mi humilde opinión xD

😊😊

Hmmmm, testuvo muy buena la clase, pero creo que algo le quedo mal al profe y me gustaria saber si si es asi, cuando le da los estilos al .header–button la forma en la que lo selecciona en el css, ya que solo hay un header y pues para eso se le llamo a esa clase .header–button entonces no era necesario seleccionarlo llamandolo .header–title-container .header–button {}, si estoy en lo correcto?

si les aparece una linea abajo del texto de la etiqueta a puede removerla con la propiedad -> text-decoration: none;

a mi me queda el icono del botón abajo, no a la dereca

¿Por qué razón se colocó el botón dentro de la clase .header__title-container?
Colocándolo fuera de esta clase

<div class="header__title-container">
				<h1>La próxima revolución en el intercambio de criptomonedas</h1>
				<p>
					Batatabit te ayudara a navegar entre los diferentes precios y
					tendencias.
				</p>
			</div>
			<a href="#" class="header__button"
				>Conoce Nuestros Planes <span class="header__button-icon"></span
			></a>

y habiéndole colocado a la etiqueta header align-item en lugar de align-self a cada contenedor hijo no es necesario hacer cálculos para centrar

header .header__button {
	position: absolute;
	top: 270px;
	width: 229px;
	height: 48px;
	padding: 15px;
	}

Varie el ancho de la pantalla y jamás hubo error.
Si es mala práctica o algo hacédmelo saber

Aquí otra forma de hacerlo, utilizando una variable para el ancho del button. Creo que es más fácil de esta manera.

.header--title-container .header--button{
    position: absolute;
    left: calc((100% - var(--button-widh))/2);
    top: 270px;
    display: block;
    margin-top: 35px;
    padding: 15px;
    width: var(--button-widh);

El calc es 50% - la mitad del ancho del elemento a centrar

📢📢 AVISO IMPORTANTE ❗❗

• Mira el siguiente tutorial para acceder al resumen visual de la clase📕

Para los que se preguntan cómo hallar la cantidad exacta que debemos restar en :

top: cal (100% - X)

• Slide 1
  
  
• Slide 2
  
  
• Slide 3
  
  
• Slide 4
  
  
• Slide 5
  
  
• Slide 6