CSS垂直水平居中 - feishuang008

小小的总结一下：行内元素水平居中用text-align: center;块级元素水平居中用margin-left: auto; margin-right: auto;

 

首先讨论一下单行时的情况。

毫无疑问，这是最简单的一种情况。

HTML结构如下：

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="demo"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>     <span style="color: #0000ff;"><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>111111111111111111111111111111111111<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span> <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span>

高度不固定（这种方法同样适用于多行文时的情况，下面就不再讨论）

<span style="color: #008080;">1</span> <span style="color: #800000;">.demo </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    text-align</span>:<span style="color: #0000ff;"> center</span>; 
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    padding-top</span>:<span style="color: #0000ff;"> 20px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">    padding-bottom</span>:<span style="color: #0000ff;"> 20px</span>;
<span style="color: #008080;">5</span> }

高度固定

<span style="color: #008080;">1</span> <span style="color: #800000;">.demo </span>{
<span style="color: #008080;">2</span> <span style="color: #ff0000;">    text-align</span>:<span style="color: #0000ff;"> center</span>;
<span style="color: #008080;">3</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 100px</span>;
<span style="color: #008080;">4</span> <span style="color: #ff0000;">    line-height</span>:<span style="color: #0000ff;"> 100px</span>;
<span style="color: #008080;">5</span> }

 

接下来，讨论下多行时的情况。

HTML结构如下：

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="demo"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>     <span style="color: #0000ff;"><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>111111111111111111111111111111111111<span style="color: #0000ff;"><span style="color: #800000;">br </span><span style="color: #0000ff;">/></span>22222222222222222222<span style="color: #0000ff;"></span><span style="color: #800000;">span</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span> <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span>

高度不固定时只需要添加pading值就可以，不多加讨论了。

高度固定时

方法一：父元素设置display: table，子元素设置display:table-cell。利用了表格的特性。

<span style="color: #008080;"> 1</span> <span style="color: #800000;">.demo </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">    height</span>:<span style="color: #0000ff;"> 100px</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">    display</span>:<span style="color: #0000ff;"> table</span>;
<span style="color: #008080;"> 4</span> <span style="color: #ff0000;">    margin-left</span>:<span style="color: #0000ff;"> auto</span>;
<span style="color: #008080;"> 5</span> <span style="color: #ff0000;">    margin-right</span>:<span style="color: #0000ff;"> auto</span>;
<span style="color: #008080;"> 6</span> }
<span style="color: #008080;"> 7</span> <span style="color: #800000;">.demo span </span>{
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">    display</span>:<span style="color: #0000ff;"> table-cell</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">    vertical-align</span>:<span style="color: #0000ff;"> middle</span>;
<span style="color: #008080;">10</span> }

方法二：父元素设置position: relative，子元素设置position: absolute。主要是利用了translate的中心是相对于元素本身的特点。

<span style="color: #008080;"> 1</span> <span style="color: #800000;">.demo </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">  position</span>:<span style="color: #0000ff;"> relative</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 100px</span>;
<span style="color: #008080;"> 4</span> }
<span style="color: #008080;"> 5</span> 
<span style="color: #008080;"> 6</span> <span style="color: #800000;">.demo span </span>{
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">  position</span>:<span style="color: #0000ff;"> absolute</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">  left</span>:<span style="color: #0000ff;"> 50%</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">  top</span>:<span style="color: #0000ff;"> 50%</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;">  -webkit-transform</span>:<span style="color: #0000ff;"> translate(-50%, -50%)</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">      -ms-transform</span>:<span style="color: #0000ff;"> translate(-50%, -50%)</span>;
<span style="color: #008080;">12</span> <span style="color: #ff0000;">          transform</span>:<span style="color: #0000ff;"> translate(-50%, -50%)</span>;
<span style="color: #008080;">13</span> }

方法三：利用flex布局。

<span style="color: #008080;"> 1</span> <span style="color: #800000;">.demo </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 100px</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">  display</span>:<span style="color: #0000ff;"> -webkit-box</span>;
<span style="color: #008080;"> 4</span> <span style="color: #ff0000;">  display</span>:<span style="color: #0000ff;"> -webkit-flex</span>;
<span style="color: #008080;"> 5</span> <span style="color: #ff0000;">  display</span>:<span style="color: #0000ff;"> -ms-flexbox</span>;
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">  display</span>:<span style="color: #0000ff;"> flex</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">  -webkit-box-pack</span>:<span style="color: #0000ff;"> center</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">  -webkit-justify-content</span>:<span style="color: #0000ff;"> center</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">      -ms-flex-pack</span>:<span style="color: #0000ff;"> center</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;">          justify-content</span>:<span style="color: #0000ff;"> center</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">  -webkit-box-align</span>:<span style="color: #0000ff;"> center</span>;
<span style="color: #008080;">12</span> <span style="color: #ff0000;">  -webkit-align-items</span>:<span style="color: #0000ff;"> center</span>;
<span style="color: #008080;">13</span> <span style="color: #ff0000;">      -ms-flex-align</span>:<span style="color: #0000ff;"> center</span>;
<span style="color: #008080;">14</span> <span style="color: #ff0000;">          align-items</span>:<span style="color: #0000ff;"> center</span>;
<span style="color: #008080;">15</span> }

方法四：利用:after,:before伪类，结合inline-block的特性实现垂直居中。

<span style="color: #008080;"> 1</span> <span style="color: #800000;">.demo </span>{
<span style="color: #008080;"> 2</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 100px</span>;
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">  text-align</span>:<span style="color: #0000ff;"> center</span>;
<span style="color: #008080;"> 4</span> }
<span style="color: #008080;"> 5</span> 
<span style="color: #008080;"> 6</span> <span style="color: #800000;">.demo:after, .demo:before </span>{
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">  display</span>:<span style="color: #0000ff;"> inline-block</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">  vertical-align</span>:<span style="color: #0000ff;"> middle</span>;
<span style="color: #008080;"> 9</span> <span style="color: #ff0000;">  width</span>:<span style="color: #0000ff;"> 0</span>;
<span style="color: #008080;">10</span> <span style="color: #ff0000;">  height</span>:<span style="color: #0000ff;"> 100%</span>;
<span style="color: #008080;">11</span> <span style="color: #ff0000;">  visibility</span>:<span style="color: #0000ff;"> hidden</span>;
<span style="color: #008080;">12</span> <span style="color: #ff0000;">  content</span>:<span style="color: #0000ff;"> ''</span>;
<span style="color: #008080;">13</span> }
<span style="color: #008080;">14</span> 
<span style="color: #008080;">15</span> <span style="color: #800000;">.demo span </span>{
<span style="color: #008080;">16</span> <span style="color: #ff0000;">  display</span>:<span style="color: #0000ff;"> inline-block</span>;
<span style="color: #008080;">17</span> <span style="color: #ff0000;">  vertical-align</span>:<span style="color: #0000ff;"> middle</span>;
<span style="color: #008080;">18</span> }

 

暂时就想到这些了。