居中问题

居中问题

• CSS中的居中可分为水平居中和垂直居中；水平居中分为行内元素居中和块状元素居中；块状元素分为定宽块状元素居中和不定宽块状元素居中。
• 行内元素：在一条直线上排列（默认宽度只与内容有关），都是同一行，水平方向排列；行内元素不能包含块状元素，只能包含文本或者其他行内元素；行内元素设置width,height,margin,padding无效；常见行内元素：<a>,<b>,<img>,<input>,<label>,<select>,<span>,<button>等。
• 块状元素：各占据一行（默认宽度和父元素一致），垂直方向上排列，从新行开始，结束接着一个断行；块状元素可以包含行内元素和块状元素；常见的块状元素：<div>,<form>,<table>,<td>,<th>,<h1>等。
• inline-block:既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性,例如<input>,<img>

水平居中

1. 行内元素居中

   .ele {
   text-align: center;
   }
   hello world!

2. 块状元素居中

• 定宽块状元素居中（块状元素的宽度为固定值）

  .ele {
  width: 200px;
  border: 1px soild red;
  margin: 0 auto;//实现居中
  }
  

  hello world

• 不定宽块状元素居中（块状元素的宽度不确定）
  方法一：使用 display: table；然后设该元素“左右margin”值为“auto”来实现居中

  .ele {
  display: table;
  margin: 0 auto;
  }
  

  hello world
  
  方法二：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果

  .ele {
  display: inline;
  }
  .container {
  text-align: center;
  }
  

  
  

  
  hello world
  

  
  
  
  方法三：通过给父元素设置float，然后给父元素设置position:relative和left:50%，子元素设置position:relative和left: -50%来实现水平居中。

  .container {
  float: left;
  position: relative;
  left: 50%;
  clear: both;
  }
  .ele {
  position: relative;
  left: -50%;
  }
  

  
  

  
  hello world
  

  
  

垂直居中

• 垂直居中可分为父元素高度确定的单行文本，以及父元素高度确定的多行文本

1. 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height高度一致来实现

   .ele h2 {
   margin: 0;
   height: 100px;
   line-height: 100px;//与高度一致
   }
   

   
   

   Hello world

   
   

2. 父元素高度确定的多行文本
   方法一：

   .ele {
   display: table;
   vertical-align: middle;
   }
   

   
   

   hello world

   
   

   hello world

   
   

   hello world

   
   
   
   方法二：设置块级元素的display为table-cell,激活vertical-align

   .ele {
   height: 300px;
   display: table-cell; // IE8+,Chrome,Firefox
   vertical-align: middle;
   }
   

   
   

   hello world

   
   

   hello world

   
   

   hello world</>