Fe-interview: [css] 第39天 写出你知道的CSS水平和垂直居中的方法

Created on 24 May 2019  ·  9Comments  ·  Source: haizlin/fe-interview

第39天 写出你知道的CSS水平和垂直居中的方法

css
Source
picture haizhilin2013

Most helpful comment

这个就多了，分为水平居中，垂直居中，水平垂直居中。
可以看下我之前整理的：还不会CSS水平垂直居中？这里有12种方案

然后呢，后来发现有个同学整理的比我更多
如何居中一个元素（终结版）

针对上面的整理，我还补充了一条

已知宽高，利用绝对定位来居中

picture xiangshuo1992 on 25 May 2019
👍5 ❤1

All 9 comments

flex布局水平垂直居中:

<!--  html -->
<div class="outer">
    <div class="inner"></div>
</div>

/*css*/
.outer{
    display:flex;
    width:200px;
    height:200px;
    border:1px solid red;
}
.inner{
    width:100px;
    height:100px;
    border:1px solid blue;
    margin:auto;
}
git710 picture git710 on 25 May 2019
👎1 
<div class="parent">
  <div class="child" />
</div>

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}
wenyejie picture wenyejie on 25 May 2019
👍1

这个就多了，分为水平居中，垂直居中，水平垂直居中。
可以看下我之前整理的：还不会CSS水平垂直居中？这里有12种方案

然后呢，后来发现有个同学整理的比我更多
如何居中一个元素（终结版）

针对上面的整理，我还补充了一条

已知宽高，利用绝对定位来居中

xiangshuo1992 picture xiangshuo1992 on 25 May 2019
👍5 ❤1

水平垂直居中，flex布局，定位布局（absolute+margin）| (asbolute+transform)也可以实现。text-align:center水平居中，这种方案还有好多种。

rocky-191 picture rocky-191 on 25 May 2019

完全居中常用两种方案：

  1. 绝对布局
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
  1. flexbox
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}
tzjoke picture tzjoke on 28 May 2019 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      .box {
        position: fixed;
        background: red;
        width: 100px;
        height: 100px;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>
BobLiu1990 picture BobLiu1990 on 18 Sep 2019

垂直居中

https://codepen.io/NARUTone/pen/NWWjorK

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css-center</title>
        <style type="text/css">
            .parent {
                width: 60%;
                height: 500px;
                margin: 15px auto;
                padding: 12px;
                background-color: #008000;
                color:#fff ;
            }

            .child {
                background-color: #99de93;
                padding: 10px;
            }

            .absolute-center {
              width: 50%;
              height: 50%;
              overflow: auto;
              margin: auto;
              position: absolute;
              top: 0; left: 0; bottom: 0; right: 0;
            }

            .is-Negative {
        width: 300px;
        height: 200px;
        padding: 20px;
        position: absolute;
        top: 50%; left: 50%;
        margin-left: -170px; /* (width + padding)/2 */
        margin-top: -120px; /* (height + padding)/2 */
            }

            .is-Transformed { 
              width: 50%;
              height: 200px;
              margin: auto;
              position: absolute;
              top: 50%; left: 50%;
              -webkit-transform: translate(-50%,-50%);
          -ms-transform: translate(-50%,-50%);
              transform: translate(-50%,-50%);
            }


            .Center-Container.is-Table { display: table; }
            .is-Table .Table-Cell {
              display: table-cell;
              vertical-align: middle;
            }
            .is-Table .Center-Block {
              width: 50%;
              height: 200px;
              margin: 0 auto;
            }

            .Center-Container.is-Inline { 
              text-align: center;
              overflow: auto;
            }

            .Center-Container.is-Inline:after,
            .is-Inline .Center-Block {
              display: inline-block;
              vertical-align: middle;
            }
            .Center-Container.is-Inline:after {
              content: '';
              height: 100%;
              margin-left: -0.25em; /* To offset spacing. May vary by font */
            }
            .is-Inline .Center-Block {
                width: 60%;
                height: 200px;
              max-width: 99%; /* Prevents issues with long content causes the content block to be pushed to the top */
              /* max-width: calc(100% - 0.25em) /* Only for IE9+ */ 
            }

            .is-Flexbox {
              display: -webkit-box;
              display: -moz-box;
              display: -ms-flexbox;
              display: -webkit-flex;
              display: flex;
              -webkit-box-align: center;
                 -moz-box-align: center;
                 -ms-flex-align: center;
              -webkit-align-items: center;
                      align-items: center;
              -webkit-box-pack: center;
                 -moz-box-pack: center;
                 -ms-flex-pack: center;
              -webkit-justify-content: center;
                      justify-content: center;
            }
        </style>
    </head>
    <body>
        <div class="parent" style='position:relative;'>
            <h3>absolute垂直居中定位</h3>
            <div class='child absolute-center'>
                <h3>内容</h3>
            </div>
        </div>
        <div class="parent" style='position:relative;'>
            <h3>负margin垂直居中定位</h3>
            <div class='child is-Negative'>
                <h3>内容</h3>
            </div>
        </div>      
        <div class="parent" style='position:relative;'>
            <h3>transform法垂直居中定位</h3>
            <div class='child is-Transformed'>
                <h3>内容</h3>
            </div>
        </div>

        <div class="parent Center-Container is-Table">
          <div class="Table-Cell">
            <div class="Center-Block">
            <!-- CONTENT -->
                <div class='child'>
                        <h3>table-cell法</h3>
                    </div>
            </div>
          </div>
        </div>

        <div class="Center-Container parent is-Inline">
          <div class="Center-Block child">
            <!-- CONTENT -->
            <h3>inline-block法</h3>
          </div>
        </div>

        <div class="parent" style='position:relative;'>
            <h3>Flexbox法垂直居中定位</h3>
            <div class='child is-Flexbox'>
                <h3>内容</h3>
            </div>
        </div>      
    </body>
</html>
NARUTOne picture NARUTOne on 25 Oct 2019

flex布局水平垂直居中:

<!--  html -->
<div class="outer">
    <div class="inner"></div>
</div>

/*css*/
.outer{
    display:flex;
    width:200px;
    height:200px;
    border:1px solid red;
}
.inner{
    width:100px;
    height:100px;
    border:1px solid blue;
    margin:auto;
}
MrZ2019 picture MrZ2019 on 29 Oct 2020

完全居中常用两种方案：

  1. 绝对布局
.parent {
    position: relative;
}
.child {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
  1. flexbox
.parent {
    display: flex;
    justify-content: center;
    align-items: center;
}

.parent {
position: relative;
}
.child {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}

jamsehua picture jamsehua on 10 Jan 2021
Was this page helpful?
0 / 5 - 0 ratings

Related issues

haizhilin2013 picture haizhilin2013  ·  3Comments
haizhilin2013 picture haizhilin2013  ·  3Comments
haizhilin2013 picture haizhilin2013  ·  3Comments
haizhilin2013 picture haizhilin2013  ·  3Comments
haizhilin2013 picture haizhilin2013  ·  3Comments