css中容器英文 |css 按钮文字上下居中

.container {
width: 80%; /* 容器宽度 */
margin: auto; /* 让容器水平居中 */
background-color: #fff; /* 容器背景色 */
padding: 20px; /* 文本内容和容器边缘之间的距离 */
}

CSS容器的主要作用之一是处理盒子模型。在CSS中，每个HTML元素都是被称为一个盒子的。这个盒子由四个主要部分组成：内容(content)、内边距(padding)、边框(border)和外边距(margin)。容器就是用来处理这些不同层次之间的关系的。

.box {
width: 200px;
height: 200px;
background-color: #fff;
border: 1px solid #000;
margin: 20px;
}

在上面这个例子中，大家使用容器来包含一个名为“box”的元素。在这个容器中，大家可以添加一些其他的CSS属性，比如背景色、内边距等等，以便让这个元素能够更好地适应页面的布局和风格。

CSS容器也可以用来设置页面的布局。比如，如果大家想让一个页面中的所有元素都居中，大家可以创建一个容器并将其中所有的元素包括进去。

.layout {
width: 80%;
margin: auto;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}

在这个例子中，大家使用flexbox布局来将元素以中心对齐的方式排列，并且定义了一个容器来包含所有这些元素。容器的属性使得大家可以轻易地定义元素的位置、大小、对齐方式等等。

总之，CSS容器是在页面设计和布局中一个至关重要的概念。它们可以用来处理盒子模型、设置页面的布局、适应不同的分辨率和设备、以及为用户提供更好的体验。