html - 是否有任何 CSS 来对齐框/元素？

Question

我见过有人说不要使用 <div align="center">Some Text</div>和 <center>Some Text</center>因为它已经过时了，但我找不到任何 CSS 来对齐元素内的所有内容。我发现最接近它的是 text-align: center;但这只是对齐文本，而不是元素。是否有任何 CSS 允许您对齐元素？

这是CSS。我想居中的是 #editor .这是一个<textarea></textarea>标签。

@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

要水平居中一个框，您需要给它一个明确的宽度，然后将其边距设置为“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>

您还可以水平对齐一个框，方法是给它的父容器一个 text-align 值 center 并使其显示:内联:

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

最后，您可以使用 flexbox 在其父级内水平对齐 block 容器:

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