一、元素居中對齊：margin: auto

要水平居中對齊一個元素div， 可以使用 margin: auto;。

設定到元素的寬度將防止它溢位到容器的邊緣。

元素通過指定寬度，並將兩邊的空外邊距平均分配：

div 元素是居中的

$1```

        padding: 10px;

    }

[嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss_align_container)

**注意:** 如果沒有設定 width 屬性(或者設定 100%)，居中對齊將不起作用。

## 二、文字居中對齊：text-align: center

如```css
$1```
    .center {

        text-align: center;

        border: 3px solid green;

    }

[嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss_align_text)
```css
$1```
    
    
    img {

        display: block;

        margin: auto;

        width: 40%;
```css
$1```
[![image](https://img2018.cnblogs.com/blog/24244/202002/24244-20200205185617067-665934915.png)](https://img2018.cnblogs.com/blog/24244/202002/24244-20200205185616635-1818491005.png)

    
    
    .right {

        position: absolute;

        right: 0px;

 ```css
$1```
    
    body {

        margin: 0;

        padding: 0;
```css
$1```

    }

     

    .right {

 ```css
$1```

    }

[嘗試一下
»```css
$1```
        border: 3px solid #73AD21;

        padding: 10px;

    }

[嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss_align_float)

當像這樣對齊元素時，對 元素的外邊距和內邊距進行預定義是一個好主意。這樣可以避免在不同的瀏覽器中出現可見的差異。

>```css
$1```
        overflow: auto;

    }

[嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss_layout_clearfix)
```css
$1```

        padding: 0;

    }

 ```css
$1```
### 1、垂直居中 - 使用 padding

CSS 中有很多方式可以實現垂直居中對齊。 一個簡單的方式就是頭部頂部使用 padding:

[![image](https://img2018.cnblogs.com/blog/24244/202002/24244-20200205185620608-625891929.png)](https://img2018.cnblogs.com/blog/24244/202002/24244-20200205185620240-1104834267.png)
```css
$1```
    
    
    .center {

        padding: 70px 0;

        border: 3px solid green;

        text-align: center;

    }

[嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss_align_padding2)

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

[![image](https://img2018.cnblogs.com/blog/24244/202002/24244-20200205185621917-656236544.png)](https://img2018.cnblogs.com/blog/24244/202002/24244-20200205185621571-863947222.png)

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

    }

[嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss_align_line)

### 3、垂直居中 - 使用 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%;

        transform: translate(-50%, -50%);

    }

[嘗試一下 »](https://www.runoob.com/try/try.php?filename=trycss_align_transform)

**提示:** 更多 transform 屬性內容可以參閱 [2D
翻轉章節](https://www.runoob.com/css/css3-2dtransforms.html)。

![045_結果](https://images2018.cnblogs.com/blog/24244/201808/24244-20180812003647119-1514168598.jpg)