Html如何设置元素水平居中
网页中元素如何设为水平居中，其中水平居中又针对不同元素，居中的方式不同。如果设置元素为文本、图片等内联元素（又称行内元素）时，水平居中是通过给父元素设置 text-align:center 来实现的；如果设置元素是块状元素，此时块状又分为定宽块状元素和不定宽块状元素，此时设置居中需要看下文了，哈哈
1.“内联元素”的“水平”居中
- 01
内联元素又称行内元素，常见元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>,此类元素是通过给父类元素设置text-align:center 来实现。
- 02
案例：写一个<p>这是测试水平居中</p>，效果如图：
- 03
在<style>中加入CSS样式 <style type="text/css"> p{ text-align: center; } </style> 结果如图:
2.1“定宽块状元素”的“水平”居中
- 01
常见块状元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>，此类元素是通过通过设置“左右margin”值为“auto”来实现居中的来实现。
- 02
案例：<div>定宽块状元素水平居中显示</div>，效果如图：
- 03
在<style>中加入CSS样式 <style type="text/css"> div{ width:100px;/*定宽*/ margin: 10px auto; } </style> (注意一定要给块元素设置宽度，不然没有效果) 结果如图:
2.2“不定宽块状元素”的“水平”居中
- 01
块状元素此时没有给他设置宽度，那么他居中有三种方式，1.table标签包裹然后设置margin（和2.1一样）。2.将块元素变成内联元素，然后给父类元素设置text-align:center 来实现。3.利用position:relative向左 偏移left:x%（其中xs视具体情况而定）。
- 02
案例：<p>定宽块状元素水平居中显示</p>，效果如图：
- 03
2.2.1.table标签包裹代码设置和效果图如下：
- 04
2.2.2将块元素变成内联元素代码设置和效果图如下：
- 05
2.2.3利用position:relative代码设置和效果图如下：