實現水平垂直居中的4種方法

阿新 • • 發佈：2021-01-07

技術標籤：前端面試題 margin translate flex 垂直居中 css

1、第一類 absolute 和 margin

1.1 position: absolute 和 margin: auto

    .parent1 {
        width: 300px;
        height: 300px;
        background: brown;
        margin-bottom: 32px;
        position: relative;
        line-height: 300px;
    }

    .child1 {
        width: 150px;
        height: 150px;
        background: green;
        text-align: center;
        line-height: 150px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

1.2 position: absolute 和 margin: - 一半寬度/高度

    .parent2 {
        width: 300px;
        height: 300px;
        background: brown;
        margin-bottom: 32px;
        position: relative;
    }

    .child2 {
        width: 150px;
        height: 150px;
        background: green;
        text-align: center;
        line-height: 150px;
        position: absolute;
        left: 50%;
        top: 50%;
        /*自身寬度的一半*/
        margin-left: -75px;
        /*自身高度的一半*/
        margin-top: -75px;
    }

2、第二類 position: absolute 和 translate

    .parent3 {
        width: 300px;
        height: 300px;
        background: brown;
        margin-bottom: 32px;
        position: relative;
    }
    .child3 {
        width: 150px;
        height: 150px;
        background: green;
        text-align: center;
        line-height: 150px;
        position: absolute;
        left: 50%;
        top: 50%;
        /*自身寬高的一半*/
        transform: translate(-50%, -50%);
    }

3、第三類 flex

    .parent4 {
        width: 300px;
        height: 300px;
        background: brown;
        margin-bottom: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .child4 {
        width: 150px;
        height: 150px;
        background: green;
        text-align: center;
        line-height: 150px;
    }

程式碼連結

水平垂直居中.html

參考連結

彭先生：談談CSS實現水平垂直居中佈局的方法

最近面試的時候，面試官問到了CSS水平垂直居中佈局的方式，對於剛入前端沒多久的我，無疑是一臉懵逼，閒了趕緊查閱資料分析一波，給各位分享一下，避免落坑。

css水平垂直居中幾種方法？

首先我們規定兩個div，為父子級別，後面各個案例都是基於 1 <div class=\"parent\">

盒子水平垂直居中10種方法

盒子水平垂直居中10種方法 HTML程式碼 <body> <div id="container"> <div id="box"></div>

實現水平垂直居中的4種方法

技術標籤：前端面試題margintranslateflex垂直居中css 1、第一類 absolute 和 margin 1.1 position: absolute 和 margin: auto

css實現盒子水平垂直居中--3種常用方法

需要居中顯示的子盒子 <body> <div class=\"box\">我要居中顯示</div> </body>

利用絕對定位實現水平垂直居中

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">

js中實現深拷貝的4種方法

技術標籤：JavaScript js中深拷貝的方法原生js中遞迴函式拷貝將資料中所有的資料拷貝下來，對拷貝之後的資料進行修改不會影響到原資料 ,兩個物件或陣列不共享一塊記憶體

CSS實現水平垂直居中

技術標籤：炫酷的CSScsscss3html5html前端水平垂直居中居中元素定寬高： 1. absolute + margin auto

display:table-cell實現水平垂直居中

轉載：https://www.cnblogs.com/yangshifu/p/6954364.html　如果檢視css手冊，會發現display有許多帶table字樣的可選屬性，有table、inline-table、table-row-group、table-row、table-cell等10個之多，可以賦予div