css居中方式大全

定宽：

position:relative; left:50%; margin-left:[width/2]

• margin: 0 auto;

• 定宽：

  position:absolute; left 50%; translateX:50%;

text-aligin:center

• Flex 布局

Flex布局

转换为块级元素
• 通过父元素控制行内元素居中：【见7】

定宽定高

position:absolute; translateY:50%

• 定高：

  position:relative; top:50%; margin-top:[height/2];

定高：

height = line-height

• 转换为表格元素：

  display:table-cell; vertical-align:middle;

• 使用精灵元素：

  display:inline-block; content:''; height:100%; vertical-align:middle

• Flex布局

Flex布局

Flex布局居中方案

display: flex/inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;

方案总结

每种居中都有自己的优缺点，在使用时，可以根据CSS属性兼容性、代码可行性、页面分辨率进行选择；个人推荐Flex布局来进行居中。

demo代码附录

HTML:
<!-- 子元素主动居中 -->
<!-- 行内 -->
<div class="parent">
<span class="child inline-center-child">子元素-行内</span>
</div>
<!-- 块级 -->
<div class="parent">
<div class="child block-center-child">子元素-块级</div>
</div>
<!-- 父元素主动居中 -->
<!-- 行内 -->
<div class="parent inline-center-parent">
<span class="child">父元素-行内</span>
</div>
<!-- 块级 -->
<div class="parent block-center-parent">
<div class="child">父元素-块级</div>
</div>

CSS样式初始化
*{
margin: 0;
padding: 0;
}
/*元素初始化*/
.parent{
display: inline-block;
background: #eeb8c3;
width: 200px;
height: 200px;
margin-right: 10px;
}
.child{
background: #ee4866;
width: 70px;
height: 70px;
}

CSS居中核心代码：
/*居中代码*/

.inline-center-child{
}

.block-center-child{
/* case1 */
margin: 0 auto;

/* case2 */
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

/* case3 */
position: relative;
top: 50%;
margin-top: -50px;
}

.inline-center-parent{
/* case1 */
text-align: center;

/* case2 */
display: table-cell;
vertical-align: middle;

/* case3 */
line-height: 200px;
}
/* case4 */
.inline-center-parent::before{
display: inline-block;
content: '';
height: 100%;
vertical-align: middle;
}
.block-center-parent{
}
/* 万能-flex布局 */
.parent{
display: inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;
}