水平垂直居中的幾種方式
阿新 • • 發佈：2019-02-05
一、flex方式（適用於居中元素元素寬高未知）
<body>
<img src="images/myPage/avatar2.png">
</body>html,body{
height: 100%;
}
body {
display: flex;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
background: #aaa 需要注意的是，要使圖片在螢幕上水平垂直居中，必須設定html和body的高度為100%，否則只能實現水平居中（如下圖），因為父元素的高度是子元素撐起來的
但是這種方式僅限於body裡面只有一個子元素，如果body裡面有多個div不行,因為flex佈局裡垂直水平居中設定是相對於所有子元素進行計算的，假設有兩張圖片
二、絕對定位和負邊距（適用於居中元素的寬高是固定的）
img{
position: absolute;
top: 50%;
left: 50%;
margin-left: -80px; /*圖片寬度的一半*/
margin-top 之所以要設定負邊距，是因為top,left設定的是元素左上角與body左上角的距離，要使其整個元素垂直居中就要設定負邊距，分別為寬高的一半
三、CSS3的transform屬性（適用於居中元素元素寬高未知）
img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
padding: 100px;
border: 50px solid #fff;
background: #000;
} translate 函式當中使用百分比是以該元素的內容區、補白(padding)、邊框(border)為標準計算的，即使img元素再加一些padding和border，依然可以垂直水平居中
四、margin:auto
img{
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}