1. 程式人生 > >水平垂直居中的幾種方式

水平垂直居中的幾種方式

一、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;
    }