HTML内容居中⽅式总结
  在HTML⽹页排版经常会⽤到关于对其⽅式的情况，⽔平居中和垂直居中。特别是⽔平居中，并不是⼀个简单的text-align就可以解决所有的情况。
  开始之前普及⼀点HTML知识，⽬标很明显，不同的页⾯结构情况下，要达到居中的效果⽅式不同。
    常⽤的块状元素有：
    <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>......此外为标签设置display:block也可强制将其他元素转化成块状元素。    常⽤的内联元素有：
    <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>......当然块状元素也可以通过代码display:inline将元素设置为内联元素。
    常⽤的内联块状元素有：
    <img>、<input>.....代码display:inline-block就是将元素设置为内联块状元素。
  默认状态下，块状元素都会在所处的包含元素内⾃上⽽下按顺序垂直延伸分布，宽度都为100%，即以⾏的形式占据位置。内联元素都会在所处的包含元素内从左到右⽔平分布显⽰。
  ⽔平居中
  a).如果被设置元素为⽂本、图⽚等⾏内元素时，⽔平居中是通过给⽗元素设置text-align:center 来实现的。
html怎么让所有内容居中  当被设置元素为块状元素时⽤ text-align：center 并达不到居中的效果。分为定宽块状元素和不定宽块状元素两种情况。
  b).定宽块状元素，对其板块本⾝进⾏设置：
width:500px;
margin:20px auto;
  c).不定宽块状(这是最常遇到的情况)，可以细分为3个⼩⽅法:
加⼊ table 标签
第⼀步：为需要设置的居中的元素外⾯加⼊⼀个 table 标签 ( 包括 <tbody>、<tr>、<td> )。第⼆步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元
素的⽅法⼀样）。
设置 display;inline ⽅法
改变块级元素的 dispaly 为 inline 类型 display:inline;，然后使⽤ text-align:center ；来实现居中效果
设置 position:relative 和 left:50%;
通过给⽗元素设置 float，然后给⽗元素设置position:relative和left:50%，⼦元素设置position:relative 和left:-50% 来实现⽔平居中。
  垂直居中
  　a).⽗元素⾼度确定的单⾏⽂本的竖直居中的⽅法是通过设置⽗元素的 height 和 line-height ⾼度⼀致来实现的。
height:100px;
line-height:100px;
  　b).⽗元素⾼度确定的多⾏⽂本、图⽚、块状元素的竖直居中的⽅法有两种：
  使⽤插⼊ table (包括tbody、tr、td)标签，同时设置vertical-align：middle。(PS:css 中有⼀个⽤于竖直居中的属性 vertical-align，但这个样式只有在⽗元素为td 或 th 时，才会⽣效)　
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display:table-cell;，激活 vertical-align 属性。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。