How to centre a div (or any content)-CodePudding

I added a small div in my page as a cool way to display 3 options to choose, but it's showing the box in the left side. I don't know exactly what I need to use so it displays the div "card" in the middle. I tried Align-items,align-content and even text align but none of them works and I don't know if there is any other option.

body{
    background: #212121;
    margin: 0;
}

header{
    text-align: center;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    color: #ff568e;
    border-bottom: 4px dashed #ff568e;
}

.card {
    align-items: center;
    width: 210px;
    height: 254px;
    border-radius: 4px;
    background: #212121;
    display: flex;
    gap: 5px;
    padding: .4em;
  }
  
  .card p {
    height: 100%;
    flex: 1;
    overflow: hidden;
    cursor: pointer;
    border-radius: 2px;
    transition: all .5s;
    background: #212121;
    border: 1px solid #ff5a91;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .card p:hover {
    flex: 4;
  }
  
  .card p span {
    min-width: 14em;
    padding: .5em;
    text-align: center;
    transform: rotate(-90deg);
    transition: all .5s;
    text-transform: uppercase;
    color: #ff568e;
    letter-spacing: .1em;
  }
  
  .card p:hover span {
    transform: rotate(0);
  }

<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="estilos.css">
    <title>Juego</title>
</head>
<body>
    <header>
        <h1>QUIERO JUGAR UN JUEGO....</h1> <img src="icons/jigsaw.png" alt="foto Saw" height="256px">
        <h2>A continuación, podrás elegir los diferentes niveles...</h2>
        <h2>Cada uno más dificil que el otro. GANAR O MORIR. HAZ TU ELECCIÓN</h2>
    </header>

        <div >
            <p><span>HOVER ME</span></p>
            <p><span>HOVER ME</span></p>
            <p><span>HOVER ME</span></p>
        </div>

</body>
</html>

Please, someone let me know what I need to do to center it.

CodePudding user response：

body{
    background: #212121;
    margin: 0;
}

header{
    text-align: center;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    color: #ff568e;
    border-bottom: 4px dashed #ff568e;
}

.card {
    justify-content: center;
   
    height: 254px;
    border-radius: 4px;
    background: #212121;
    display: flex;
    gap: 5px;
    padding: .4em;
  }
  
  .card p {
  display:flex;
    height: 100%;
    
    overflow: hidden;
    cursor: pointer;
    border-radius: 2px;
    transition: all .5s;
    background: #212121;
    border: 1px solid #ff5a91;
    width:70px;
    justify-content: center;
    align-items: center;
    
  }
  
  .card p:hover {
    flex: 4;
  }
  
  .card p span {
    min-width: 14em;
    padding: .5em;
    text-align: center;
    transform: rotate(-90deg);
    transition: all .5s;
    text-transform: uppercase;
    color: #ff568e;
    letter-spacing: .1em;
    
  }
  
  .card p:hover span {
    transform: rotate(0);
     
  }

<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="estilos.css">
    <title>Juego</title>
</head>
<body>
    <header>
        <h1>QUIERO JUGAR UN JUEGO....</h1> <img src="icons/jigsaw.png" alt="foto Saw" height="256px">
        <h2>A continuación, podrás elegir los diferentes niveles...</h2>
        <h2>Cada uno más dificil que el otro. GANAR O MORIR. HAZ TU ELECCIÓN</h2>
    </header>

        <div >
            <p><span>HOVER ME</span></p>
            <p><span>HOVER ME</span></p>
            <p><span>HOVER ME</span></p>
        </div>

</body>
</html>

CodePudding user response：

Add to your card class this line: margin: 0 auto;

body{
    background: #212121;
    margin: 0;
}

header{
    text-align: center;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    color: #ff568e;
    border-bottom: 4px dashed #ff568e;
}

.card {
    margin: 0 auto;
    align-items: center;
    width: 210px;
    height: 254px;
    border-radius: 4px;
    background: #212121;
    display: flex;
    gap: 5px;
    padding: .4em;
  }
  
  .card p {
    height: 100%;
    flex: 1;
    overflow: hidden;
    cursor: pointer;
    border-radius: 2px;
    transition: all .5s;
    background: #212121;
    border: 1px solid #ff5a91;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .card p:hover {
    flex: 4;
  }
  
  .card p span {
    min-width: 14em;
    padding: .5em;
    text-align: center;
    transform: rotate(-90deg);
    transition: all .5s;
    text-transform: uppercase;
    color: #ff568e;
    letter-spacing: .1em;
  }
  
  .card p:hover span {
    transform: rotate(0);
  }

<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="estilos.css">
    <title>Juego</title>
</head>
<body>
    <header>
        <h1>QUIERO JUGAR UN JUEGO....</h1> <img src="icons/jigsaw.png" alt="foto Saw" height="256px">
        <h2>A continuación, podrás elegir los diferentes niveles...</h2>
        <h2>Cada uno más dificil que el otro. GANAR O MORIR. HAZ TU ELECCIÓN</h2>
    </header>

        <div >
            <p><span>HOVER ME</span></p>
            <p><span>HOVER ME</span></p>
            <p><span>HOVER ME</span></p>
        </div>

</body>
</html>