CSS 布局 - 水平 & 垂直对齐

秒速五厘米 2021-09-15 05:32 449阅读 0赞

## 元素居中对齐 ##

要水平居中对齐一个元素(如 <div>), 可以使用 **margin: auto;**。 外边距

设置到元素的宽度将防止它溢出到容器的边缘。

元素通过指定宽度，并将两边的空外边距平均分配：

案列:

</div>

![70][]

注意: 如果没有设置 **width** 属性(或者设置 100%)，居中对齐将不起作用。

## 文本居中对齐 ##

如果仅仅是为了文本在元素内居中对齐，可以使用 **text-align: center;**

## 图片居中对齐 ##

要让图片居中对齐, 可以使用 **margin: auto;** 并将它放到 块 元素中:

img \{  
    display: block;  
    margin: 0 auto;  
\}  
</style>  
</head>  
<body>  
  
  
<h2>图片居中对齐</h2>  
<p>要让图片居中对齐, 可以使用 margin: auto; 并将它放到块元素中：</p>

## 左右对齐 - 使用定位方式 ##

我们可以使用 **position: absolute;** 属性来对齐元素:

![70 1][]

## 左右对齐 - 使用定位方式 ##

注释：绝对定位元素会被从正常流中删除，并且能够交叠元素。

提示: 当使用 **position** 来对齐元素时, 通常 **<body>** 元素会设置 **margin** 和 **padding** 。 这样可以避免在不同的浏览器中出现可见的差异。

当使用 position 属性时，IE8 以及更早的版本存在一个问题。如果容器元素（在我们的案例中是 <div class="container">）设置了指定的宽度，并且省略了 !DOCTYPE 声明，那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时，请始终设置 !DOCTYPE 声明：

我们可以使用 **position: absolute;** 属性来对齐元素:

![70 2][]

![70 3][]

## 左右对齐 - 使用 float 方式 ##

我们也可以使用 **float** 属性来对齐元素:

.right \{  
    float: left;  
    width: 300px;  
    border: 3px solid \#73AD21;  
    padding: 10px;  
\}  
</style>  
</head>  
<body>  
  
  
<h2>右对齐</h2>  
<p>以下实例演示了使用 float 属性来实现右对齐:</p>  
  
  
<div class="right">  
  <p>我老爹在小时候给我的一些人生建议，我现在还记忆深刻。</p>

</div>

![70 4][]

## 垂直居中对齐 - 使用 padding ##

CSS 中有很多方式可以实现垂直居中对齐。 一个简单的方式就是头部顶部使用 **padding**:

.center \{  
    padding: 70px 0;  
    border: 3px solid green;  
\}  
</style>  
</head>  
<body>  
  
  
<h2>垂直居中</h2>  
<p>以上实例，我们使用 padding 属性实现元素的垂直居中：</p>  
  
  
<div class="center">  
  <p>我是垂直居中的。</p>

</div>

![70 5][]

如果要水平和垂直都居中，可以使用 **padding** 和 **text-align: center**:

## 垂直居中 - 使用 line-height ##

.center \{  
    line-height: 200px;  
    height: 200px;  
    border: 3px solid green;  
    text-align: center;  
\}  
  
  
.center p \{  
    line-height: 1.5;  
    display: inline-block;  
    vertical-align: middle;  
\}  
</style>  
</head>  
<body>  
  
  
<h2>居中</h2>  
<p>以下实例中，我们让 line-height 属性值和 height 属性值相等来设置 div 元素居中：</p>  
  
  
<div class="center">  
  <p>我是垂直居中的。</p>  
</div>

![70 6][]

## 垂直居中 - 使用 position 和 transform ##

除了使用 **padding** 和 **line-height** 属性外,我们还可以使用 **transform** 属性来设置垂直居中:

.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%);  
\}  
</style>  
</head>  
<body>  
  
  
<h2>居中</h2>  
<p>以下实例中，我们使用了 positioning 和 transform 属性来设置水平和垂直居中：</p>  
  
  
<div class="center">  
  <p>我是水平和垂直居中的。</p>  
</div>  
  
  
<p>注意: IE8 及更早版本不支持 transform 属性。</p>  
  
  
</body>

</html>

![70 7][]

[70]: /images/20210813/cfe458b0d8b34eec804ac17cb16c1231.png
[70 1]: /images/20210813/f1d95df2ef094d0a94f27e880a2e64b3.png
[70 2]: /images/20210813/6547ad54f8db47f1835db62e2de89f9b.png
[70 3]: /images/20210813/4fc41e06a35f4f24bdc2718bdec792e7.png
[70 4]: /images/20210813/212f02f3d8e04e61b5b02ba620577b2d.png
[70 5]: /images/20210813/e212a7912f25469ba4505e4d71bbb830.png
[70 6]: /images/20210813/dbb32d4aecc24182be2d33c465dea857.png
[70 7]: /images/20210813/af7626571d224fcf8908d8c0e50e1e42.png