水平垂直居中的幾種方式
阿新 • • 發佈: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 : -80px; /*圖片高度的一半*/
}
之所以要設定負邊距,是因為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;
}