Skip to content

Instantly share code, notes, and snippets.

@ghostcode

ghostcode/Flex实现水平垂直居中.md

Last active March 2, 2023 06:48
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ghostcode/16e05592da16ab088d21 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ghostcode/16e05592da16ab088d21 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ghostcode revised this gist Nov 2, 2020. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions Flex实现水平垂直居中.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,5 +1,8 @@
    水平垂直居中是前端的痛，也是前端__永恒__话题，这次记录两个用`display:flex`实现的方法：

    ![Snipaste_2020-11-02_11-41-33](https://user-images.githubusercontent.com/745181/97827862-6c5a6100-1d00-11eb-8af0-32e541dbe340.png)


    第一种：

    ### html ###
  2. ghostcode revised this gist Nov 2, 2020. 1 changed file with 32 additions and 4 deletions.
    36 changes: 32 additions & 4 deletions Flex实现水平垂直居中.md
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,7 @@

    ```
    <div class="flex">
    <p>content content</p>
    <p>内容</p>
    </div>
    ```

    @@ -17,21 +17,31 @@
    display:flex;
    width:600px;
    height:600px;
    background-color:#333;
    background-color:#ff9900;
    }
    .flex p{
    margin:auto;
    /* 修饰作用 */
    background-color: #000000;
    padding:20px;
    color:#fff;
    font-size:40px;
    font-weight:700;
    }
    ```

    https://codepen.io/ghostcode/pen/WNxJdNN

    第二种：


    ### html ###

    ```
    <div class="flex">
    <p>content content</p>
    <p>内容</p>
    </div>
    ```

    @@ -46,6 +56,24 @@
    height:600px;
    background-color:#333;
    }
    .flex{
    display:flex;
    align-items:center;
    justify-content:center;
    width:600px;
    height:600px;
    background-color:#ff9900;
    }
    .flex p{
    /* 修饰作用 */
    background-color: #000000;
    padding:20px;
    color:#fff;
    font-size:40px;
    font-weight:700;
    }
    ```

    <a class="jsbin-embed" href="http://jsbin.com/cotequ/1/embed?html,output">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
    https://codepen.io/ghostcode/pen/gOMzoOq

  3. ghostcode revised this gist Nov 2, 2020. 1 changed file with 4 additions and 4 deletions.
    8 changes: 4 additions & 4 deletions Flex实现水平垂直居中.md
    View file
    Original file line number Diff line number Diff line change
    @@ -2,15 +2,15 @@

    第一种：

    ###html###
    ### html ###

    ```
    <div class="flex">
    <p>content content</p>
    </div>
    ```

    ###css###
    ### css ###

    ```
    .flex{
    @@ -27,15 +27,15 @@
    第二种：


    ###html###
    ### html ###

    ```
    <div class="flex">
    <p>content content</p>
    </div>
    ```

    ###css###
    ### css ###

    ```
    .flex{
  4. ghostcode revised this gist Jul 11, 2014. 1 changed file with 26 additions and 1 deletion.
    27 changes: 26 additions & 1 deletion Flex实现水平垂直居中.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,6 @@
    水平垂直居中是前端的痛，也是前端__永恒__话题，这次记录一个用`display:flex`实现的方法：
    水平垂直居中是前端的痛，也是前端__永恒__话题，这次记录两个用`display:flex`实现的方法：

    第一种：

    ###html###

    @@ -22,5 +24,28 @@
    margin:auto;
    }
    ```
    第二种：


    ###html###

    ```
    <div class="flex">
    <p>content content</p>
    </div>
    ```

    ###css###

    ```
    .flex{
    display:flex;
    align-items:center;
    justify-content:center;
    width:600px;
    height:600px;
    background-color:#333;
    }
    ```

    <a class="jsbin-embed" href="http://jsbin.com/cotequ/1/embed?html,output">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
  5. ghostcode revised this gist Jul 8, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Flex实现水平垂直居中.md
    View file
    Original file line number Diff line number Diff line change
    @@ -23,4 +23,4 @@
    }
    ```

    <a href="http://jsbin.com/cotequ/1/watch?html,output">xxx</a>
    <a class="jsbin-embed" href="http://jsbin.com/cotequ/1/embed?html,output">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
  6. ghostcode revised this gist Jul 8, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion Flex实现水平垂直居中.md
    View file
    Original file line number Diff line number Diff line change
    @@ -23,4 +23,4 @@
    }
    ```

    <a class="jsbin-embed" href="http://jsbin.com/cotequ/1/embed?html,output">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
    <a href="http://jsbin.com/cotequ/1/watch?html,output">xxx</a>
  7. ghostcode revised this gist Jul 8, 2014. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion Flex实现水平垂直居中.md
    View file
    Original file line number Diff line number Diff line change
    @@ -21,4 +21,6 @@
    .flex p{
    margin:auto;
    }
    ```
    ```

    <a class="jsbin-embed" href="http://jsbin.com/cotequ/1/embed?html,output">JS Bin</a><script src="http://static.jsbin.com/js/embed.js"></script>
  8. ghostcode revised this gist Jul 8, 2014. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions Flex实现水平垂直居中.md
    View file
    Original file line number Diff line number Diff line change
    @@ -15,6 +15,7 @@
    display:flex;
    width:600px;
    height:600px;
    background-color:#333;
    }
    .flex p{
  9. ghostcode created this gist Jul 8, 2014.
    23 changes: 23 additions & 0 deletions Flex实现水平垂直居中.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    水平垂直居中是前端的痛，也是前端__永恒__话题，这次记录一个用`display:flex`实现的方法：

    ###html###

    ```
    <div class="flex">
    <p>content content</p>
    </div>
    ```

    ###css###

    ```
    .flex{
    display:flex;
    width:600px;
    height:600px;
    }
    .flex p{
    margin:auto;
    }
    ```