前端必会的 HTML+CSS 常用技巧 之 元素居中的方式

  
  
  
如何让子元素在父元素里面左右上下居中
  相信有很多小伙伴们在接触html、css时经常碰到一些元素如何居中的问题，那么在这里我们就来简单的聊一下css元素居中的那些事儿…
  css元素居中分为水平（左右）居中、是垂直（上下）居中、左右上下居中。
  首先呢，元素分为两大类：块状元素block和内联元素inline（内联块元素inline-block也统归为内联元素）【也有分成三类的：块状元素、内联元素、可变元素】；下面就让我们来了解一下不同的元素类型所用的居中方法。
  常见的内联元素有 a –超链接， img - 图片 ，input - 输入框， span - 定义文本内区块…
  常见的块状元素有div - 最常用的块级元素、 h1 -h6- 大标题、p - 段落…
  
  

水平（左右）居中

  

  方法一

  效果图1：只针对内联元素

  因为内联元素是不能设置宽高，本身大小是由内容撑开的，所以在这里我们就可以用到 text-align: center 来实现左右居中，直接给父元素添加 text-align: center 即可。
  具体实现代码如下：

<!-- css样式 -->
<style>
    div{width: 600px;height: 200px;background: pink;text-align: center;}
    span{background: #ccc;}
</style>

<!-- HTML结构 -->
<div>
    <span>内容撑开容器大小</span>
</div>

    
  
  
  效果图2：针对块状元素

  具体的实现代码分别如下：
  

  方法二：

  利用margin: 0 auto; 实现左右居中; margin 属性是指盒子与盒子之间的距离。

<!-- css样式 -->
<style>
    div{width: 600px;height: 100px;background: pink;}
    p{width: 100px;height: 50px;background: orange;margin: 0 auto;}
</style>

<!-- HTML结构 -->
<div>
    <p></p>
</div>

  

  方法三：

  利用定位 position 实现左右居中

    <style>
        div{
            width: 600px;height: 100px;background: pink;
            position: relative;
            }
        p{
            width: 100px;height: 50px;background: orange;
            position:absolute;left:0;right:0;margin:auto;
        }       
    </style>

    <div>
        <p></p>
    </div>

  

  方法四：

  利用定位 position + 变形属性 translateX 实现左右居中

    <style>
        *{padding: 0; margin: 0;}
        div{width: 600px; height: 100px; background: pink; margin: 0 auto;
        position: relative;
        }
        p{width: 100px; height: 50px; background: orange;
        position: absolute; left: 50%;
        transform:translateX(-50%);
        }      
    </style>

    <div>
        <p></p>
    </div>

  
  小总结：需要注意的是，对于内联元素的左右居中，内联元素不能设置宽高，所以必须有内容，内容撑开内联元素的大小，内容可以是文本、图片，在这里相当于是把内联元素当成文本去使用 text-align : cneter ; 因此需要把 text-align : cneter ;添加在它的父元素里面，这样才能实现内联元素的居中；对于块状元素的居中，块状元素可以没有内容，但必须有宽高，使用的是盒模型的 margin 属性， margin 属性是指盒子与盒子之间的距离，所以 margin: 0 auto;就需要添加在元素本身。在这里呢，我们还可以延伸一点，对于内联元素的居中问题，我们可以先用display属性转换元素类型为block ，再给元素添加宽高来实现居中，常应用用于a元素模拟按钮。
  
  

垂直（上下）居中

  
  效果图：

  

  方法一

  首先，需要给子元素设置好 display:inline-block（因为需要加宽高，且保证可以横向进行排列）
然后同样利用文本对齐方式（垂直）vertical-align: middle;那么有必要在此对 vertical-align 属性进行一个说明：vertical-align是文本的垂直对齐方式，它是按照字体的顶线、中线、基线、底线来进行一个“参考”对齐的，所以呢我们需要一条“参考线”来帮助我们确定顶线、中线、基线、底线，在子元素的后面添加一个同级的内联元素（设置好 display: inline-block），并且中间不能有换行，紧挨着子元素；然后给“参考线”确定中线，添加属性 vertical-align:middle 并设置宽度为0，高度为100%。
直白一点“参考线”就是创建了一个与父容器同高的“隐形容器”。
  具体实现代码如下：

<!-- css样式 -->
<style>
    div{width: 600px;height: 100px;background: pink;}
    em{width: 100px;height: 50px;background: orange;display:inline-block;vertical-align: middle;}
    span{width:0;height:100%;display:inline-block;vertical-align: middle;}
</style>

<!-- HTML结构 -->
<div class="box">
    <em></em><span></span>
</div>

注：使用参考线的方法同样适用于块状子元素在父容器的居中!!!
  

  方法二

  利用定位 position 实现上下居中

    <style>
        div{width: 600px;height: 100px;background: pink;position: relative;}
        p{width: 100px;height: 50px;background: orange;position:absolute;top:0;bottom:0;margin:auto;}       
    </style>

    <div>
        <p></p>
    </div>

  

  方法三

  利用定位 position + 变形属性 translateY 实现上下居中

	<style>
        *{padding: 0; margin: 0;}
        div{width: 600px; height: 100px; background: pink; margin: 0 auto;
        position: relative;
        }
        p{width: 100px; height: 50px; background: orange;
        position: absolute; top: 50%;
        transform:translateY(-50%);
        }       
    </style>

    <div>
        <p></p>
    </div>

  

  方法四

  利用行高 line-height 实现单行文本的上下居中
  此方法只针对单行文本的上下居中

效果图如下：

代码如下：

    <style>
        div{width: 600px;height: 200px;background: pink;line-height: 200px;}
        span{background: #ccc;}
    </style>

    <div>
        <span>内容撑开容器大小</span>
    </div>

  代码的实现也是比较简单，直接给父元素添加line-height为父元素的高度即可。
  
  

左右上下居中

  那么接下来就让我们结合以上列举的左右、上下的居中方法实现左右上下居中！
  效果图：

  
  具体的实现代码分别如下：
  

  方法一：“参考线”

利用“参考线”来实现左右上下的居中

<!-- css样式 -->
<style>
    div{width: 600px;height: 100px;background: pink;text-align: center;}
    em{width: 100px;height: 50px;background: orange;display:inline-block;vertical-align: middle;}
    span{width:0;height:100%;display:inline-block;vertical-align: middle;}
</style>

<!-- HTML结构 -->
<div>
    <em></em><span></span>
</div>

  

  方法二：定位（position）

利用定位（position）来实现左右上下的居中，也可适用于块状元素（dsiplay转换元素类型）
  具体实现代码如下：

<!-- css样式 -->
<style>
    div{width: 600px;height: 100px;background: pink;position: relative;}
    p{width: 100px;height: 50px;background: orange;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;}       
</style>

<!-- HTML结构 -->
<div>
    <p></p>
</div>

  

  方法三：display:flex;形成弹性盒子

利用display:flex;形成弹性盒子来实现左右上下的居中
  具体实现代码如下：

<!-- css样式 -->
<style>
    div{width: 600px;height: 100px;background: pink;display: flex;/* 形成弹性盒子 */}
    p{width: 100px;height: 50px;background: orange;margin:auto;}       
</style>

<!-- HTML结构 -->
<div>
    <p></p>
</div>

  

  方法四：定位 position + 变形属性 translate

利用定位 position +变形属性中的移动 translate 来实现左右上下的居中
  具体实现代码如下：

    <style>
        *{padding: 0; margin: 0;}
        div{width: 600px; height: 100px; background: pink; margin: 0 auto;
        position: relative;
        }
        p{width: 100px; height: 50px; background: orange;
        position: absolute; left: 50%; top: 50%;
        transform:translate(-50%, -50%);
        }       
    </style>

    <div>
        <p></p>
    </div>

  
  
  
在此，css元素的居中问题完了吗？没有！！！后续会持续加码……
  
  

好的，以上就是本人对此的粗浅认识，如有不足之处，望诸位大神们不吝赐教，谢谢！
  
  

如果对您有所帮助，不妨点个赞， 谢谢！