css元素居中的方式有哪些呢？

让子元素在父元素里面左右上下居中

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

左右居中

1 . 针对内联元素，因为内联元素是不能设置宽高，本身大小是由内容撑开的，所以在这里我们就可以用到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>

效果图：

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

效果图：

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

结合左右居中那么此方法就可实现上下左右居中，具体实现代码如下：

<!-- 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）来实现左右上下的居中，也可适用于块状元素（dsiplay转换元素类型）
具体实现代码如下：

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

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

效果图

第三种方法：

利用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>

效果图

在此，css元素的居中问题完了吗？没有！！！

                                                                        后续将会持续添加，敬请关注！