HTML CSS margin text-align position 等水平和垂直对齐属性

HTML CSS 的水平和垂直对齐属性有margin、text-align、position 等很多种。

要使块元素（例如 <div> ）水平居中，请使用 margin: auto; 代码。
设置元素的宽度将防止其延伸到容器的边缘。
然后，元素将占用指定的宽度，剩余空间将在两个外边距之间平均分配。
注意：如果未设置 width 属性（或将其设置为 100％），则居中对齐无效。

要使块元素（例如 div> ）内文本居中，则使用 text-align: center; 代码。

如需把图像设置居中，可以将左右外边距设置为 margin-left: auto; 和 margin-right: auto; ，并将其设置为块元素，代码如下：

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

左和右对齐元素的一种方法是设置块元素 position: absolute; 同时设置左或右距离为0，代码如下：

<style>
.right {
  position: absolute;
  right: 0px;
}
</style>

<div class="right">
  <p>www.zhuei.com</p>
</div>

左和右对齐元素的另一种方法是设置块元素 float 属性 设置 float: right; 或 float: left;，代码如下：

.right {
  float: right;
}

注意：如果一个元素比包含它的元素高，并且它是浮动的，它将溢出其容器。您可以使用 clearfix hack (overflow: auto;)来解决此问题。代码如下：

.clearfix {
  overflow: auto;
}

有很多方法可以在 CSS 中垂直对齐元素。如需同时垂直和水平对齐，请使用 padding 和 text-align: center; 代码如下：

.center {
  padding: 70px 0;
  text-align: center;
}

垂直对齐另一个技巧是使用其值等于 height 属性值的 line-height 属性：

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


<p>在此例中，我们使用 padding 和 text-align 将 div 元素垂直和水平居中：</p>

<div class="center">
  <p>我是垂直和水平居中。</p>
</div>

垂直对齐还有一种解决方案是使用 position 和 transform 属性：

<style>
.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

<p>在此例中，我们使用 position 和 transform 属性将 div 元素垂直和水平居中：</p>

<div class="center">
  <p>我是垂直和水平居中。</p>
</div>

垂直对齐还可以使用 flexbox 将内容居中。但请注意，IE10以及更早的版本不支持 flexbox。

如果你发现错误或有其他见解，请给www.zhuei.com留言，我们会尽快更新本文！