CSS垂直居中方法
w3c指定盒子模型（標準模型）
首先，水平居中很簡單：margin: 0 auto
垂直居中：
方法一：使用相對定位和 margin-top 屬性對元素進行垂直居中
由于div元素的祖先元素html和body的高度默認是為0的，所以需要設定為100%，并且清除默認樣式，即把margin和padding設定為0，如果不清除默認樣式的話，瀏覽器就會出現滾動條，
top屬性可以使元素向下偏移，但默認情況下，由于position的值為static（靜止的、不可以移動的），元素在檔案流里是從上往下、從左到右緊密的布局的，我們不可以直接通過top、left等屬性改變它的偏移，所以，想要移動元素的位置，就要把position設定為不是static的其他值，如relative,absolute,fixed等，（注意，relative是不會使元素脫離檔案流的，absolute和fixed則會！也就是說，relative會占據著移動之前的位置，但是absolute和fixed就不會），
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.test{
width: 200px;
height: 200px;
background-color: aquamarine;
/* 水平居中 */
margin: 0 auto;
position: relative;
top: 50%;
margin-top: -100px;
}
</style>注：這個方法兼容性不錯，但是有一個小缺點：必須提前知道被居中塊級元素的尺寸，否則無法準確實作垂直居中，
方法二：使用 transform 屬性
transform 屬性向元素應用 2D 或 3D 轉換，該屬性允許我們對元素進行旋轉、縮放、移動或傾斜，
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.test{
width: 200px;
height: 200px;
background-color: aquamarine;
/* 水平居中 */
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
}
</style>注：這種方法非常明顯的好處就是不必提前知道被居中的元素的尺寸，因為transform中偏移的百分比就是相對于元素自身的尺寸而言，當被居中的元素是被自己內部元素撐開寬或者高的時候可適用此方法，
方法三：絕對定位結合 margin:auto
這種方式的兩個核心是：把要垂直居中的元素相對于父元素絕對定位，top、bottom、left、right設定為0，再將要居中的元素的margin設為auto，這樣就可以實作垂直居中了，<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body{
position: relative;
}
.test{
width: 200px;
height: 200px;
background-color: aquamarine;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
position: absolute;
}
</style>方法四：使用 CSS3 的彈性布局（flex）
使用CSS3的彈性布局很簡單，只要設定父元素（這里是指body）的display的值為flex即可，
<style>
html,body{
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body{
display: flex;
align-items: center;
justify-content: center;
}
.test{
width: 200px;
height: 200px;
background-color: aquamarine;
}
</style>Flex是Flexible Box的縮寫，意為”彈性布局”，用來為盒狀模型提供最大的靈活性，具體可以看另一條筆記：
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/435401.html
標籤：Html/Css