好程式設計師前端教程css對齊方案總結

好程式設計師前端教程css對齊方案總結
垂直居中
通用佈局方式(內斂元素和塊狀元素都適用)

利用flex:
核心程式碼:

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

利用transformX(-50%):
核心程式碼:

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

內斂元素的垂直居中

單行內斂元素:設定內斂元素的高度和行高相等
核心程式碼:

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

塊狀元素

固定元素高度的塊狀元素
核心程式碼

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

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

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

水平居中
通用佈局方式

flex佈局
核心程式碼：

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

核心程式碼:

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

內斂元素水平居中

text-align:center
核心程式碼:

.container{
text-align:center
}

塊狀元素水平居中

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

.container{
margin:0 auto
}

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

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

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

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

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

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

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

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

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

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

相對於 body 的水平垂直居中

列表佈局(相容性好)
核心程式碼:

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

position 佈局
核心程式碼

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