前言：
此时兄弟们对“html水平居中”大体比较看重，咱们都想要剖析一些“html水平居中”的相关知识。那么小编也在网摘上搜集了一些有关“html水平居中””的相关内容，希望各位老铁们能喜欢，咱们一起来了解一下吧！居中，是我们编码过程中最常见的，那么，我们平时常见的居中方式，下面一一罗列出来，有错误的地方，望码友多多包涵并加以矫正。
水平居中
1、多块级元素，设置display:inline-block;使之在一行排列,在父级样式里，设置text-align：center;就可以实现水平居中的效果
body {
text-align: center;
}
div{
width: 100px;
height: 100px;
border: 1px solid;
display: inline-block;
}
2、内联元素，利用text-align：center;可以实现块级元素内部的内联元素的水平居中
div {
border: 1px solid red;
width: 100px;
height: 100px;
text-align: center;
}
<div>
<span>块级元素中的行内元素的水平居中</span>
</div>
3、块级元素，通过把固定宽高的块级元素的margin-left和margin-right设置为auto，方可实现
div{
width: 100px;
height: 100px;
border: 1px solid;
margin： 0 auto;
}
<div></div>
4、利用弹性盒子（display: flex;）
给父级定宽定高，然后设置display: flex;以及justify-content: center;方可达到水平居中效果
body {
width: 500px;
height: 500px;
display: flex;
justify-content: center;
border: 1px solid red;
}
div {
width: 100px;
height: 100px;
border: 1px solid;
}
<body>
<div></div>
</body>
垂直居中
1、内联元素（单行）
通过设置元素的height和line-height,方可达到居中效果
2、多行元素，利用表布局（table）
通过给想要居中的元素的父级设置display: talbe-cell;以及vertical-align：enter;方可居中
3、弹性盒子（flex）
给父级设置display: flex;变成弹性盒子。
分两种，
（1），主轴方向为水平，直接设置 align-items: center;
（2），主轴方向为垂直，设置flex-direction: column;改变主轴方向，然后设置justify-content: center;
弹性盒模型主轴不同，居中的方式也不同，灵活应用。
4、固定宽高的块级元素
利用父相子绝的定位原理，实现垂直居中
position: absolute;
left: 50%;
top: 50%;
margin-left: (自身高度的一半);
5,未知宽高的块级元素
利用transform: translateY(-50%);方可实现
position: absolute;
top: 50%;
transform: translateY(-50%);
水平垂直方向的居中
1、固定宽高
通过margin平移整体宽高的一半，实现水平垂直居中
{
position: absolute;
width: 100px;
height: 100px;
border: 1px solid;
left: 50%;
top: 50%;
margin-top: -50px;
margin-left: -50px;
}
2、未知宽高
利用transform中的translate()属性实现
{
position: absolute;
border: 1px solid;
left: 50%;
top: 50%;
transform: translateY(-50%);
transform: translateX(-50%);
}
3、弹性盒子（flex）
通过display：flex，把父级变成弹性盒模型，利用align-items: center;justify-content: center;方可实现居中。
注意：弹性盒子容器中，多行项目的居中方式另加计算。
body {
border: 1px solid;
width: 300px;
height: 300px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
div {
border: 1px solid;
width: 100px;
height: 100px;
}
随着学习的不断深入，居中方式可以有很多种，我们要善于利用，更加明确什么情况下用怎样的居中方式。
标签： #html水平居中
