Is there any CSS to align a box/element?

Question

I've seen people say not to use <div align="center">Some Text</div> and <center>Some Text</center> because it's outdated but I can't find any CSS to align everything inside an element. The closest thing I've found to it is text-align: center; but that just aligns the text, not the elements. Is there any CSS that allows you to align elements?

This is the CSS. The thing that I want to center is #editor. It's a <textarea></textarea> tag.

@font-face {
	font-family: Bandits;
	src: url("Bandits.ttf");
	font-weight: bold;
}

#editor {
	position: absolute;
	bottom: 35px;
	left: 35px;
	width: 800px;
	height: 600px;
	resize: none;
}

#see-result {
	position: absolute;
	top: 276px;
	left: 425px;
	width: 125px;
	letter-spacing: 2.7px;
	font-weight: bold;
	background-color: #888;
	text-align: center;
	padding-top: 6.5px;
	padding-bottom: 6.5px;
	cursor: pointer;
	font-family: Calibri;
} #see-result:hover {
	background-color: #ABABAB;
}

header {
	text-align: center;
	font-size: 65px;
	font-family: Bandits;
	letter-spacing: 2px;
}

Answer 1

To horizontally center a box you need to give it an explicit width and then set its margins to "0 auto":

.container{
    border:solid 2px lightblue;
    width:600px;
    height:400px;
}

.center{
    border:solid 2px red;
    height:200px;

    /*centering CSS*/
    width:200px;
    margin:0 auto;
}

<div class="container">
    <div class="center">
        This box is centereed
    </div>
</div>

You can also horizontally align a box by giving it's parent container a text-align value of center and making it display:inline:

.container{
    border:solid 2px lightblue;
    width:600px;
    height:400px;
    text-align:center;
}

.center{
    border:solid 2px red;
    width:200px;
    height:200px;
  
    /*Centering CSS*/
    display:inline;
    text-align:center;
}

<div class="container">
    <div class="center">
        This box is centereed
    </div>
</div>

Finally, you can use flexbox to horizontally align block containers within their parent:

.container{
    border:solid 2px lightblue;
    width:600px;
    height:400px;
	
    /*Centering CSS*/
    display:flex;
    justify-content:center;
}

.center{
    border:solid 2px red;
    width:200px;
    height:200px;
}

<div class="container">
    <div class="center">
        This box is centereed
    </div>
</div>

Answer 2

You can use css flexbox for vertical and horizontal positionaing here

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.flex-container {
     display: -webkit-flex;
     display: flex;
     width: 450px;
     height: 250px;
     background-color: lightgrey;
     justify-content: center;
     text-align: center;
     align-items: center;
}

.flex-item {
      background-color: cornflowerblue;
      width: 100px;
     height: 100px;
     margin: 10px;
}

<div class="flex-container">
  <div class="flex-item">flex item 1</div>
   <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div> 
</div>