CSS 对齐 - 蝴蝶教程

中心对齐元素

要将块元素（如<div>）水平居中，请使用margin:auto;设置元素的宽度将阻止它伸展到其容器的边缘。然后元素将占用指定的宽度，剩余的空间将在两个边距之间平均分配：

.center {
          margin: auto;
          width: 60%;
          border: 3px solid #73AD21;
          padding: 10px;
        }

尝试一下

注意：如果width属性未设置（或设置为100％），则中心对齐无效。

居中对齐文字

要将文本居中放置在元素中，请使用text-align:center;

.center {
          text-align: center;
          border: 3px solid green;
        }

尝试一下

图像居中

要使图像居中，请将左右边距设置为auto并使其成为block元素：

img {
          display: block;
          margin-left: auto;
          margin-right: auto;
        }

尝试一下

左右对齐 - 使用position

对齐元素的一种方法是使用position:absolute;：

.right {
          position: absolute;
          right: 0px;
          width: 300px;
          border: 3px solid #73AD21;
          padding: 10px;
        }

尝试一下

左右对齐 - 使用float

对齐元素的另一种方法是使用float属性：

.right {
          float: right;
          width: 300px;
          border: 3px solid #73AD21;
          padding: 10px;
        }

尝试一下

注意：如果元素高于包含它的元素，并且它被浮动，它将溢出其容器外部。您可以使用“clearfix”hack来解决此问题（请参阅下面的示例）。

清除Hack

然后我们可以添加overflow:auto;到包含元素来解决这个问题：

div {
          border: 3px solid #4CAF50;
          padding: 5px;
        }

        .img1 {
          float: right;
        }

        .clearfix {
          overflow: auto;
        }

        .img2 {
          float: right;
        }

尝试一下

垂直居中 - 使用padding

有很多方法可以在CSS中垂直居中元素。一个简单的解决方案是顶部和底部使用padding：

.center {
          padding: 70px 0;
          border: 3px solid green;
        }

尝试一下

要垂直和水平居中，请使用padding和text-align:center：

.center {
          padding: 70px 0;
          border: 3px solid green;
          text-align: center;
        }

尝试一下

垂直居中 - 使用line-height

另一个技巧是使用line-height具有等于该height属性的值的属性。

.center {
          padding: 70px 0;
          border: 3px solid green;
        }

尝试一下

垂直居中 - 使用position和transform

如果padding和line-height不是选项，第三种解决方案是使用position和transform属性：

.center {
          padding: 70px 0;
          border: 3px solid green;
        }

尝试一下