水平居中、垂直居中、水平垂直居中、浮动居中、绝对定位居中…….统统帮你搞定！

大家好，欢迎来到IT知识分享网。

2018.05.29

为了代码简介，没有加背景和其他样式，需要看效果的，可以加上背景。

目录：

• 第一部分：水平居中
  • 1、常规元素的水平居中
  • 行内元素、不定宽块级元素：text-align
  • 图片的水平居中 ：clear + display + margin
  • 定宽块级元素：margin:0 auto;
  • 通用方法(不管行还是块元素，通杀)：flex
  • 2、浮动元素的水平居中
  • 定宽元素：relative + margin-left + left
  • 不定宽元素：父float + 父relative + 子relative
  • 通用(不管是定宽还是不定宽，通杀)：flex
  • 3、绝对定位元素的水平居中
  • 定宽的元素：relative + left + …
  • 不定宽的元素：relative + left + translateX
  • 通用方式：不管是否宽度，通杀 flex
  • 4、总结：水平居中的通用方式(包含常规元素、浮动、绝对定位)：flex
• 第二部分：垂直居中
  • 1、常规元素的垂直居中
  • 行内文本元素：line-height
  • 通用(不管行级,块级元素,图片,都通杀)tabel-cell + vertical-align 或 flex
  • 2、浮动元素的垂直居中
  • 定高的元素：(relative + absolute + line-height) + top/bottom或margin-top
  • 通用方式： flex
  • 3、绝对定位元素的垂直居中
  • 利用绝对定位自身来垂直居中：translateY
  • 通用：flex
  • 4、总结：垂直居中的通用方式(包含常规元素、浮动、绝对定位)：flex
• 第三部分：水平垂直居中
  • 1、常规元素的水平垂直居中
  • 通用(一列或多列)：(table-cell + vertical-align + text-align) 或 flex
  • 2、浮动元素的水平垂直居中
  • 通用(一个或多列元素)：flex
  • 3、绝对定位元素的水平垂直居中
  • 利用绝对定位来水平垂直居中：relative + translate
  • 通用：flex
  • 4、总结：水平垂直居中的通用方式(包含常规元素、浮动、绝对定位)：flex

第一部分：水平居中

1、常规元素的水平居中

• 行内元素、不定宽块级元素：text-align
  
  

  注意：将div#inner 换成 span#inner 效果一样。

  
  

样式： #outer {text-align:center} <div id='outer'> <div id='inner'>水平居中的元素</div> </div> 

• 图片的水平居中 ：clear + display + margin
  
  

  图片的居中，比较特殊。

  
  

img { // 设置这三个属性，就可以居中 clear: both; display: block; margin:auto; } <div id='outer'> <img src="on1.png" >水平居中的元素</div> </div>

• 定宽块级元素：margin:0 auto;
  
  

  注意：样式是在inner元素中添加

  
  

样式： #inner {width:200px;margin:0 auto;} <div id='outer'> <div id='inner'>水平居中的元素</div> </div> 

• 通用方法(不管行还是块元素，通杀)：flex

#outer {     display:flex; justify-content:center; } <div id='outer'> <div id='inner'>水平居中的元素</div> </div>

2、浮动元素的水平居中

• 定宽元素：relative + margin-left + left
  注意：样式设置在浮动元素本身
  

样式： #inner-float {     position:relative; left:50%; margin-left:-100px; } <div id="outer"> <span id="inner-float" style="float: left;width: 200px;">我是要居中的浮动元素</span> </div>

• 不定宽元素：父float + 父relative + 子relative
  
  

  注意：要清除浮动，给外部元素加上float。这里的父元素就是外部元素

  
  

#outer { float:left; position:relative; left:50%; } #inner-float { position:relative; left:-50%; 或 right:50% } <div id="outer"> <span id="inner-float" style="float: left;">我是要居中的浮动元素</span> </div>

• 通用(不管是定宽还是不定宽，通杀)：flex

#outer {     display:flex; justify-content:center; } <div id="outer"> <span id="inner-float" style="float: left;width: 200px;">我是要居中的浮动元素</span> </div>

3、绝对定位元素的水平居中

• 定宽的元素：relative + left + …

// 写法一： #outer {     position: relative; } #inner-absolute {     left:50%; margin-left:-100px; } // 写法二： #outer {     position: relative; } #inner-absolute {     left:0; right:0; margin:0 auto; } <div id="outer"> <span id="inner-absolute" style="position: absolute;width: 200px;">我是要居中的浮动元素</span> </div> 

• 不定宽的元素：relative + left + translateX

#outer {     position: relative; } #inner-absolute {     left:50%; transform:translateX(-50%); // translateX是相对自身来计算的。 } <div id="outer"> <span id="inner-absolute" style="position: absolute;">我是要居中的浮动元素</span> </div>

• 通用方式：不管是否宽度，通杀 flex

#outer {     display:flex; justify-content:center; } <div id="outer"> <span id="inner-absolute" style="position: absolute;">我是要居中的浮动元素</span> </div>

4、总结：水平居中的通用方式(包含常规元素、浮动、绝对定位)：flex

#outer {     display:flex; justify-content:center; } <div id="outer"> <span id="inner-absolute">我是要居中的常规、浮动、绝对定位元素，此办法都适用</span> </div>

第二部分：垂直居中

垂直居中，默认外部元素(这里称为父元素)是有高度的

常规元素的垂直居中

• 行内文本元素：line-height

 #inner { 
    line-height:40px; } <div id="outer" style="height:40px;"> <span id="inner">我是要居中的浮动元素</span> </div>

• 通用(不管行级,块级元素,图片,都通杀)tabel-cell + vertical-align 或 flex

方式一：diaplay:tabel-cell; vertical-align #outer { 
    display: table-cell; vertical-align: middle; } 方式二：flex + align-item #outer { 
    display:flex; align-items:center; } <div id="outer" style="height:200px;"> <span id="inner">我是垂直居中的元素</span> </div>

注意：#outer{height:100px;display:table} #inner{display:table-cell;vertical-align: middle;} 也可以达到垂直居中，但是不通用。

2、浮动元素的垂直居中

• 定高的元素：(relative + absolute + line-height) + top/bottom或margin-top

方式一：relative + absolute + line-height + top/bottom #outer { 
    position: relative; } #inner { 
    line-height:100px; position: absolute; top: 0; bottom: 0; margin: auto; } 方式二：relative + absolute + line-height + margin-top #outer { 
    position: relative; } #inner { 
    line-height:100px; position: absolute; top: 50%; margin-top:-50px } <div id="outer" style="height:200px;"> <div id="inner" style="float: left;height: 100px;">我是垂直居中的元素</div> </div>

• 通用： flex

#outer { 
    display:flex; align-items:center; } <div id="outer" style="height:200px;"> <div id="inner">我是垂直居中的元素</div> </div>

3、绝对定位的垂直居中

绝对定位元素相当于inline-block：没有行和块之分，只有定高和不定高之分。

• 利用绝对定位自身来垂直居中：translateY

#outer { 
    position: relative; } #inner { 
    top:50%; transform: translateY(-50%); // 相对自身向上移动 } <div id="outer" style="height:200px;"> <div id="inner" style="position: absolute;">我是垂直居中的元素</div> </div> 

• 通用： flex

 #outer { 
    display: flex; align-items: center; } #inner { 
    line-height:100px; } <div id="outer" style="height:200px;"> <div id="inner" style="position: absolute;">我是垂直居中的元素</div> </div>

4、总结：垂直居中的通用方式(包含常规元素、浮动、绝对定位)：flex

#outer { 
    display: flex; align-items: center; } #inner { 
    line-height:100px; } <div id="outer" style="height:200px;"> <div id="inner" style="position: absolute;">我是垂直居中的常规、浮动、绝对定位元素</div> </div>

第三部分：水平垂直居中

1、常规元素的水平垂直居中

• 通用(一列或多列)：(table-cell + vertical-align + text-align) 或 flex

方式1一：table-cell + vertical-align + text-align #outer { width:400px; // 方便看效果 height:500px; // 方便看效果 display:table-cell; vertical-align:middle; text-align:center; } #inner { display:inline-block; // 适合多列 } 

• 通用：flex // 见下方

2、浮动元素的水平垂直居中

子元素可以设置 mairgin 以及word-wrap:break-word; 方便效果

• 通用(一个或多列元素)：flex // 见下方

3、绝对定位元素的水平垂直居中

• 利用绝对定位来水平垂直居中：relative + translate

 #outer { 
    width:400px; // 方便看效果 height:500px; // 方便看效果 position: relative; } #inner { 
    top:50%; left:50%; transform: translate(-50%, -50%); } <div id="outer" > <div id="inner" style="position: absolute;">我是水平垂直居中的元素</div> </div>

• 通用：flex ：见下方

4、总结：水平垂直居中的通用方式(包含常规元素、浮动、绝对定位)：flex

#outer{ 
    width:400px; // 方便看效果 height:500px; // 方便看效果 display:flex; justify-content:center; aligns-item:center; } #inner { 
    display:inline-block; // 适合多列 } <div id="outer" > <div id="inner" >我是水平垂直居中的常规、浮动、绝对定位元素</div> </div>