【水平居中】
1、對於行內元素，將其包裹在display:block的父級元素中，爲父級元素添加 text-align:center;
2、對於塊狀元素，左右外邊距爲auto即： margin:10px auto; 其中10px指的是上下外邊距爲10像素。
3、對於多個塊狀元素，將元素display設爲inline-block，並且父元素的text-align設置爲center
<body>
<div class="center">div1</div>
<div class="center">div2</div>
</body>
css:
.center{
display:inline-block;
}
body{
text-align:center
}
4、多個塊狀元素，使用flexbox佈局
只需要把塊狀元素的父元素添加 display:flex; justify-content:center;
如下:
<body>
<div class="center">div1</div>
<div class="center">div2</div>
</body>
body{
display: flex;
justify-content: center;
}
【垂直居中】
1、行內元素，將height, line-height同時設置爲父元素的高度
<div id="container">
<a href="#">hello</a>
</div>
#container{
background: #222;
height:200px;
}
a{
height:200px;
line-height:200px;
color:#fff;
}
2、多行的行內元素
組合使用display:table-cell vertical-align:middle來 定義需要居中元素的父容器
<div id="container">
<a href="#">hello，here are many words,more than one line...hello，here are many words,more than one line... hello，here are many words,more than one line... hello，here are many words,more than one line... </a>
</div>
.container{
background:#ccc;
width:300px;
height:300px;
/*以下屬性垂直居中*/
display: table-cell;
vertical-align:middle;
}
a{ color:#fff;}
3、已知高度的塊狀元素
使用top：50%;然後margin-top回退元素本身高度的一半
<div class="item"></div>
div{
width:100px;
height:100px;
background:#222;
}
.item{
top:50%;
margin-top: -50px;/*爲元素本身100px的一半，這裏是負值*/
position:absolute;
padding:0;
}
4、未知高度的塊狀元素
仍然先使用top:50%，但是這裏高度未知，所以用css3的transform屬性垂直移動
<div class="item">hello，here are many words,more than one line... hello，here are many words,more than one line... hello，here are many words,more than one line... hello，here are many words,more than one line... </div>
div{
width:100px;
background:#222;
color:#fff;
}
.item{
top:50%;
position:absolute;
transform:translateY(-50%);
}
【水平垂直居中】
1、已知高度寬度的元素
原理和上面涉及的一樣，定位absolute，top和left爲50%，然後margin-top和margin-left爲元素本身高度一半，並且是負值
<div class="item"></div>
.div{
width:100px;
height:100px;
background:#222;
color:#fff;
}
.item{
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}
2、未知寬高度的元素
使用transform
<div class="item">hello，here are many words,more than one line... hello，here are many words,more than one line... hello，here are many words,more than one line... hello，here are many words,more than one line... </div>
div{
background:#222;
color:#fff;
}
.item{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
3、使用flex佈局
<div class="parent">
<div class="item"></div>
</div>
.item{
background:#222;
color:#fff;
width:100px;
height:100px;
}
.parent{
display:flex;
justify-content:center;
align-items:center;
/*這裏要設置高度來查看出垂直居中的效果*/
background:#aaa;
height:300px;
}
補充：
關於flex佈局，彈性盒子佈局。聲明瞭display:flex;即變爲伸縮容器，在伸縮容器內的所有子元素將自動變成伸縮項目flex items.常結合使用的屬性有 dispaly:flex; flex-flow:row; 或者flex-flow:column;
思考：這裏也可以利用flex佈局來實現一列固定一列自適應的佈局吧（詳情見本blog另一篇博文）：
<div class="parent">
<div class="stable"></div>
<div class="change"></div>
</div>
.parent{
width:800px;
border:1px solid #222;
dispaly:flex;
flex-flow:row;
}
.stable{
width:200px;
border:1px solid #ccc;
}
.change{
border:1px solid #ddd;
}
關於transform屬性
transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉rotate、縮放scale、移動translate或傾斜skew。
示例寫法：
transform:translate(20px);
transform:scaleY(3);
transform:rotateY(10deg);
等等，詳情參考W3School
參考資料：
極客標籤水平垂直解決方案
參考資料：
極客標籤水平垂直解決方案
