CSS中居中

小鱼儿 2022-03-02 12:00 183阅读 0赞

参考文章：  
[https://juejin.im/post/5a7a9a545188257a892998ef][https_juejin.im_post_5a7a9a545188257a892998ef]  
[https://www.w3cplus.com/css/centering-css-complete-guide.html][https_www.w3cplus.com_css_centering-css-complete-guide.html]  
[https://segmentfault.com/a/1190000013966650?utm\_source=weekly&utm\_medium=email&utm\_campaign=email\_weekly\#articleHeader15][https_segmentfault.com_a_1190000013966650_utm_source_weekly_utm_medium_email_utm_campaign_email_weekly_articleHeader15]  
[https://www.w3cplus.com/css/float-center.html][https_www.w3cplus.com_css_float-center.html]  
[https://juejin.im/post/5c8f9e595188252db756920c][https_juejin.im_post_5c8f9e595188252db756920c]  
[https://zhuanlan.zhihu.com/p/25068655][https_zhuanlan.zhihu.com_p_25068655]  
[https://github.com/yanhaijing/vertical-center][https_github.com_yanhaijing_vertical-center]  
[https://juejin.im/entry/583b954b61ff4b006b55b43d][https_juejin.im_entry_583b954b61ff4b006b55b43d]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]

**1.水平居中**

01 行内元素 text-align:center

.parent {
       text-align: center;
    }
    span{
            border: 1px solid blue;
          }
    
    <div class="parent">
        <span class="child">child</span>
    </div>

02 块级元素 margin:auto

.child1{
      text-align: center;
      width: 100px;
      border: 1px solid blue;
      margin: auto;
    }
    
    <div class="parent1">
        <div class="child1">child</div>
    </div>

![在这里插入图片描述][20190320142923444.png]

03 多个块级元素

如果要让多个块级元素在同一水平线上居中，那么可以修改它们的 display 值。这里有两个示例，其中一个使用了 inline-block 的显示方式，另一个使用了 flexbox 的显示方式：

body {
      background: #f06d06;
      font-size: 80%;
    }
    
    main {
      background: white;
      margin: 20px 0;
      padding: 10px;
    }
    
    main div {
      background: black;
      color: white;
      padding: 15px;
      max-width: 125px;
      margin: 5px;
    }
    
    .inline-block-center {
      text-align: center;
    }
    
    .inline-block-center div {
      display: inline-block;
      text-align: left;
    }
    
    .flex-center {
      display: flex;
      justify-content: center;
    }
    
    <main class="inline-block-center">
      <div>
        I'm an element that is block-like with my siblings and we're centered in a row.
      </div>
      <div>
        I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
      </div>
      <div>
        I'm an element that is block-like with my siblings and we're centered in a row.
      </div>
    </main>
    
    <main class="flex-center">
      <div>
        I'm an element that is block-like with my siblings and we're centered in a row.
      </div>
      <div>
        I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
      </div>
      <div>
        I'm an element that is block-like with my siblings and we're centered in a row.
      </div>
    </main>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]

总结：水平居中分三种情况，行内、块级、多个块级，分别解决方法是`text-align：center`、`margin:auto`、``display`:inline-block``或者flex布局 `display:flex;justify-content: center;`

**2.垂直居中**

参考文章：  
[https://juejin.im/entry/583b954b61ff4b006b55b43d][https_juejin.im_entry_583b954b61ff4b006b55b43d]  
[https://www.w3cplus.com/css/centering-css-complete-guide.html][https_www.w3cplus.com_css_centering-css-complete-guide.html]

**第一种情况：单行+行内/具有行内元素性质的元素**

01 行内元素（单行文字垂直居中）：设置line-height=height

.parent {
       height: 200px;
       line-height: 200px;
       border: 1px solid red;
    }

01 行内元素（单行文字垂直居中）：设置padding让上下内边距相等

body{
      background: #f06d06;
    }
    
    main {
      background: white;
      margin: 20px 0;
      padding: 50px;
    }
    
    main a{
      background: black;
      color: white;
      padding: 40px 30px;
      text-decoration: none;
    }
    
    <main>
        <a href="#0">We're</a>
        <a href="#0">Centered</a>
        <a href="#0">Bits of</a>
        <a href="#0">Text</a>
      </main>

**第二种情况：多行+行内/具有行内元素性质的元素**

02 利用table/table-cell布局

首先要知道table中td默认情况下`vertical-align: middle;`,所以我们可以利用table/table-cell布局，实现多行垂直居中。

text-align是设置或检索对象中文本的左中右对齐方式。  
vertical-align是用于指定元素的上下垂直对齐方式。

text-align和vertical-align更多可以参考：  
[https://www.jianshu.com/p/ba232268f573][https_www.jianshu.com_p_ba232268f573]  
[https://www.cnblogs.com/keyi/p/5924563.html][https_www.cnblogs.com_keyi_p_5924563.html]  
[https://blog.csdn.net/zhuobin\_tian/article/details/70169664][https_blog.csdn.net_zhuobin_tian_article_details_70169664]  
[https://blog.csdn.net/diudiu5201/article/details/54666809][https_blog.csdn.net_diudiu5201_article_details_54666809]

*{
      margin: 0px;
      padding: 0px
    }
    
    body {
      background: #f06d06;
      font-size: 80%;
    }
    
    table {
      background: white;
      width: 240px;
      border-collapse: separate;
      margin: 20px;
      height: 250px;
    }
    
    table td {
      background: black;
      color: white;
      padding: 20px;
      border: 10px solid white;
      /* default is vertical-align: middle; */
    }
    
    .center-table {
      display: table;
      height: 250px;
      background: white;
      width: 240px;
      margin: 20px;
    }
    .center-table p {
      display: table-cell;
      margin: 0;
      background: black;
      color: white;
      padding: 20px;
      border: 10px solid white;
      vertical-align: middle;
    }
    
    <table>
      <tr>
        <td>
          I'm vertically centered multiple lines of text in a real table cell.
        </td>
        <td>
          I'm vertically centered multiple lines of text in a real table cell.
        </td>
      </tr>
    </table>
    
    <div class="center-table">
      <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
    </div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]

02 利用flex布局

如果没法用类table方式，可能你需要用 flexbox：

.flex-center{
      display: flex;
      border: 1px solid #0000FF;
      height: 200px;
      width: 1600px;
      justify-content:center;
      align-items:center;
    }
    
    <div class="flex-center">
      <p>I'm vertically centered multiple lines of text in a flexbox container.</p>
    </div>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]

请记住这个方法仅仅适用于父容器具有一个固定的额高度（px，%，等等），这也是为什么容器有一个高度。

02 幽灵元素（ghost element）/虚元素

利用“精灵元素”(ghost element)技术实现垂直居中，即在父容器内放一个100%高度的伪元素，让文本和伪元素垂直对齐，从而达到垂直居中的目的。

如果上述方法都不起作用，那么你就需要使用被称为幽灵元素（ghost element）的非常规解决方式：在垂直居中的元素上添加伪元素，设置伪元素的高等于父级容器的高，然后为文本添加 vertical-align: middle; 样式，即可实现垂直居中。

--------------------

附注：

resize和overflow一起使用可以设置调整div元素的大小：

div
    {
    resize:both;
    overflow:auto;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]  
还可以参考：[https://www.cnblogs.com/cpt666/p/6718643.html][https_www.cnblogs.com_cpt666_p_6718643.html]

--------------------

body {
      background: #f06d06;
      font-size: 80%;
    }
    
    div {
      background: white;
      width: 240px;
      height: 200px;
      margin: 20px;
      color: white;
      resize: vertical;
      overflow: auto;
      padding: 20px;
    }
    
    .ghost-center {
      position: relative;
    }
    .ghost-center::before {
      content: " ";
      display: inline-block;
      height: 100%;
      width: 1%;
      vertical-align: middle;
    }
    .ghost-center p {
      display: inline-block;
      vertical-align: middle;
      width: 190px;
      margin: 0;
      padding: 20px;
      background: black;
    }
    
    <div class="ghost-center">
      <p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p>
    </div>

**第三种情况：块级元素**

03 知道元素的高度：绝对定位

我们知道居中元素的高度和宽度，垂直居中问题就很简单。通过绝对定位元素距离顶部50%，并设置margin-top向上偏移元素高度的一半，就可以实现垂直居中了。

.parent {
        position: relative;
        height: 200px;
    }
    .child {
        width: 80px;
        height: 40px;
        background: blue;
        position: absolute; //
        left: 50%; //
        top: 50%; //
        margin-top: -20px; //
        margin-left: -40px; //
    }

body {
      background: #f06d06;
      font-size: 80%;
    }
    
    main {
      background: white;
      height: 300px;
      margin: 20px;
      width: 300px;
      position: relative;
      resize: vertical;
      overflow: auto;
    }
    
    main div {
      position: absolute;
      top: 50%;      
      height: 100px;
      margin-top: -50px;
      background: black;
      color: white;
    }
    
    <main>
    
      <div>
         I'm a block-level element with a fixed height, centered vertically within my parent.
      </div>
    
    </main>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]

03 块级元素 元素高度未知：绝对定位+transform

优点：不需要提前知道尺寸  
缺点：兼容性不好

.parent {
        position: relative;
        height: 200px;
    }
    .child {
        width: 80px;
        height: 40px;
        position: absolute; //
        left: 50%; //
        top: 50%; //
        transform: translate(-50%, -50%); //
        background: blue;
    }

03 块级元素：绝对定位 + margin: auto

优点：不需要提前知道尺寸，兼容性好  
缺点：这个方法是我最喜欢用的一个，要说缺点的话，我目前还不知道。

参考文章：[https://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-绝对定位-水平垂直居中/][https_www.zhangxinxu.com_wordpress_2013_11_margin-auto-absolute-_-]

.parent {
        position: relative;
        height: 200px;
        background: red;
    }
    .child {
        width: 80px;
        height: 40px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: blue;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 6]

03 块级元素：padding

缺点：如果高度固定，需要提前计算尺寸（只在某些特定情况适用）。

.parent {
        padding: 5% 0;
    }
    .child {
        padding: 10% 0;
        background: blue;
    }

03 块级元素：display: flex

缺点：兼容性不好

.parent {
        width: 600px;
        height: 200px;
        border: 1px solid red;
        display: flex;
        align-items: center;
        justify-content: center;  /*水平居中*/
    }
    .child {
        background: blue;
    }

03 块级元素：calc()

也是个不错的方法。  
缺点：兼容性较差，需要计算。

.parent {
        width: 300px;
        height: 300px;
        border: 1px solid red;
        position: relative;
    }
    .child {
        width: 100px;
        height: 100px;
        background: blue;
        padding: -webkit-calc((100% - 100px) / 2);
        padding: -moz-calc((100% - 100px) / 2);
        padding: -ms-calc((100% - 100px) / 2);
        padding: calc((100% - 100px) / 2);
        background-clip: content-box;
    }

03 块级元素：inline-block

.parent {
        width: 400px;
        height: 400px;
        border: 1px solid red;
        position: relative;
    }
    .child, .brother {
        display: inline-block;
        vertical-align: middle;
    }
    .child {
        background: blue;
        font-size: 12px;
    }
    .brother {
        height: 400px;
        font-size: 0;
    }
    
    <div class="parent">
        <div class="child">child</div>
        <div class="brother">brother</div>
    </div>

其他 当然，还有一种方法，就是使用table布局:

[https_juejin.im_post_5a7a9a545188257a892998ef]: https://juejin.im/post/5a7a9a545188257a892998ef
[https_www.w3cplus.com_css_centering-css-complete-guide.html]: https://www.w3cplus.com/css/centering-css-complete-guide.html
[https_segmentfault.com_a_1190000013966650_utm_source_weekly_utm_medium_email_utm_campaign_email_weekly_articleHeader15]: https://segmentfault.com/a/1190000013966650?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly#articleHeader15
[https_www.w3cplus.com_css_float-center.html]: https://www.w3cplus.com/css/float-center.html
[https_juejin.im_post_5c8f9e595188252db756920c]: https://juejin.im/post/5c8f9e595188252db756920c
[https_zhuanlan.zhihu.com_p_25068655]: https://zhuanlan.zhihu.com/p/25068655
[https_github.com_yanhaijing_vertical-center]: https://github.com/yanhaijing/vertical-center
[https_juejin.im_entry_583b954b61ff4b006b55b43d]: https://juejin.im/entry/583b954b61ff4b006b55b43d
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70]: /images/20220302/7b515f20e0a146f6ba447471b0ee8227.png
[20190320142923444.png]: /images/20220302/51ffa28802d84c75b80031082c1be748.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 1]: /images/20220302/184018c5be074690bfe5a54c3c916f52.png
[https_www.jianshu.com_p_ba232268f573]: https://www.jianshu.com/p/ba232268f573
[https_www.cnblogs.com_keyi_p_5924563.html]: https://www.cnblogs.com/keyi/p/5924563.html
[https_blog.csdn.net_zhuobin_tian_article_details_70169664]: https://blog.csdn.net/zhuobin_tian/article/details/70169664
[https_blog.csdn.net_diudiu5201_article_details_54666809]: https://blog.csdn.net/diudiu5201/article/details/54666809
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 2]: /images/20220302/0620a541991b4b928dfc45e98763833b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 3]: /images/20220302/80021adc66ba4616b9e3d6ad959df820.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 4]: /images/20220302/75ccf7e5eb0f42c6ad80d329b6fbd96a.png
[https_www.cnblogs.com_cpt666_p_6718643.html]: https://www.cnblogs.com/cpt666/p/6718643.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 5]: /images/20220302/c7ab3754a5fc4fdb941204710e13974a.png
[https_www.zhangxinxu.com_wordpress_2013_11_margin-auto-absolute-_-]: https://www.zhangxinxu.com/wordpress/2013/11/margin-auto-absolute-%E7%BB%9D%E5%AF%B9%E5%AE%9A%E4%BD%8D-%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTQ0NjU5MzQ_size_16_color_FFFFFF_t_70 6]: /images/20220302/90da0e5017da42689047e567d6f7b651.png