css對齊方案總結

垂直居中

通用佈局方式(內斂元素和塊狀元素都適用)

1. 利用flex:
   核心代碼:

   1 2 3 4 5

   .container{ display:flex; flex-direction:column; justify:center }

2. 利用transformX(-50%):
   核心代碼:

   1 2 3 4 5 6 7 8 9 10 11 12

   .container{ width: 300px; height: 300px; background: red; position:relative; } .child{ position: absolute; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); }

內斂元素的垂直居中

單行內斂元素:設置內斂元素的高度和行高相等
核心代碼:

1
2
3
4

.container {
    height: 120px;
    line-height: 120px;
}

塊狀元素

1. 固定元素高度的塊狀元素
   核心代碼

   1 2 3 4 5 6 7 8 9

   .container{ position: relative; } .child{ position: absolute; top: 50%; height: 100px; margin-top: -50px; }

2. 未知高度的塊狀元素
   當垂直居中的元素的高度和寬度未知時，我們可以藉助CSS3中的transform屬性向Y軸反向偏移50%的方法實現垂直居中。但是部分瀏覽器存在相容性的問題。
   核心代碼:

   1 2 3 4 5 6 7 8

   .container { position: relative; } .child { position: absolute; top: 50%; transform: translateY(-50%); }

水平居中

通用佈局方式

1. flex佈局
   核心代碼：

   1 2 3 4

   .container{ display: flex; justify-content: center; }

2. absoulte+transform
   核心代碼:

   1 2 3 4 5 6 7 8

   .container{ position:relative; } .child{ position: absolute; left: 50%; transform: translateX(-50%); }

內斂元素水平居中

1. text-align:center
   核心代碼:

   1 2 3

   .container{ text-align:center }

塊狀元素水平居中

1. 使用 margin:0 auto 必須註明子元素和父元素的寬度
   核心代碼:

   1 2 3

   .container{ margin:0 auto }

2. 多塊狀元素：
   利用內斂元素佈局方式container屬性為text-align:center;
   核心代碼:

   1 2 3 4 5 6

   .container{ text-align: center; } .child{ display: inline-block; }

水平垂直居中

固定寬高元素水平垂直居中

通過margin平移元素整體寬度的一半，使元素水平垂直居中。
核心代碼:

1
2
3
4
5
6
7
8
9
10
11
12

.container {
    position: relative;
}
.child {
    width: 300px;
    height: 100px;
    padding: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -70px 0 0 -170px;
}

未知寬高元素水平垂直居中

1. 利用2D變換，在水平和垂直兩個方向都向反向平移寬高的一半，從而使元素水平垂直居中。
   核心代碼：

   1 2 3 4 5 6 7 8 9

   .parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

2. 利用flex佈局
   利用flex佈局，其中justify-content 用於設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式；而align-items屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。
   核心代碼：

   1 2 3 4 5

   .container { display: flex; justify-content: center; align-items: center; }

相對於 body 的水平垂直居中

1. 列表佈局(相容性好)
   核心代碼:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

   .outer { display: table; position: absolute; height: 100%; width: 100%; } .middle { display: table-cell; vertical-align: middle; } .inner { margin-left: auto; margin-right: auto; width: 400px; }

2. position 佈局
   核心代碼

   1 2 3 4 5 6 7 8

   .container{ position: absolute; margin: auto; left: 0; top: 0; right: 0; bottom: 0; }