basic html! i wanna ad a black box to my page

Question

im new in coding. I want add a box to my page. The box must be centered how can i do?

I did try that codes but isn't working.

enter image description here

.panel{
    
    background-color: #FF2D00;
    border-radius: 10px;
    height: 25.625em;
    left: 5em;
    position: absolute;
    top: 50%;   
} 

<div id="panel"></div>

Answer 1

You need to give your element a width and also use a class attribute in your html.

.panel{ 
    background-color: #FF2D00;
    border-radius: 10px;
    height: 100px;
    width: 100px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) 
} 

<div class="panel"></div>

Answer 2

#panel{
    background-color: #FF2D00;
    border-radius: 10px;
    height: 25.625em;
    width: 300px;
    left: 5em;
    position: absolute;
    top: 50%
    left:0;
    right:0;
    margin: auto;
} 

<div id="panel"></div>

1. Give the element a width
2. Set the left and right to 0
3. Set the margin to auto
4. and lastly change the selector to #

:)

Answer 3

You can use margin: 0 auto; to horizontally centered the box

.panel{ 
    background-color: #000000;
    border-radius: 10px;
    height: 25.625em;
    width: 200px;
    margin: 0 auto;   
}

<div class="panel"></div>