html居中是网页设计中经常使用的一种布局方式，实现方法也比较简单。本文将详细介绍几种实现html居中的方法和对应的代码实现。
一、水平居中
1.用text-align属性实现水平居中
在父元素中设置text-align属性为center，可以实现其内部元素水平居中。例如：
<p> <p>这里是居中文本</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></p>
这样，内部的文本就会在父元素中水平居中显示。
2.用margin属性实现水平居中
在需要居中显示的元素中添加margin属性，设置左右margin值为auto，可以实现该元素水平居中。例如：
<p> <p>这里是居中文本</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></p>
这样，p元素就会在父元素中水平居中显示。
3.用flexbox实现水平居中
在父元素中设置display属性为flex和justify-content属性为center，可以实现其内部元素水平居中。例如：
<p> <p>这里是居中文本</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></p>
这样，内部的文本就会在父元素中水平居中显示。
二、垂直居中
1.用vertical-align属性实现垂直居中
在需要垂直居中的元素中添加display属性为table-cell和vertical-align属性为middle，可以实现该元素垂直居中。例如：
<p> <p>这里是居中文本</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></p>
这样，p元素就会在父元素中垂直居中显示。
2.用flexbox实现垂直居中
在父元素中设置display属性为flex、align-items属性为center和height属性为100%，可以实现其内部元素垂直居中。例如：
<p> <p>这里是居中文本</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></p>
这样，内部的文本就会在父元素中垂直居中显示。
三、水平和垂直居中
1.用text-align和vertical-align属性实现水平和垂直居中
在父元素中设置text-align属性为center和display属性为table-cell，并在需要居中的元素中设置vertical-align属性为middle，可以实现该元素同时水平和垂直居中。例如：
<p> <p>这里是居中文本</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></p>
这样，p元素就会在父元素中水平和垂直居中显示。
2.用flexbox实现水平和垂直居中
在父元素中设置display属性为flex、align-items属性为center、justify-content属性为center和height属性为100%，可以实现内部元素同时水平和垂直居中。例如：
<p> <p>这里是居中文本</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p></p>