目录：

第一部分：水平居中

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、浮动元素的水平居中

由于元素浮动之后，其本身就相当于设置了display:inline-block;也就是可以设置宽和高了。 

所以浮动元素，没有行级和块之分，都是块级或inline-block的元素；只有定宽和不定宽之分 

参考：浮动与宽高

定宽元素：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、绝对定位元素的水平居中

由于元素绝对定位之后，其本身就相当于设置了display:inline-block;也就是可以设置宽和高了。 

所以绝对定位元素，没有行级和块之分，都是块级或inline-block的元素；只有定宽和不定宽之分 

参考链接：绝对定位与宽度

定宽的元素：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>

--------------------- 

原文：https://blog.csdn.net/weixin_37219302/article/details/80504236 ，如有不当，请告知删除

水平居中
1.行内元素水平居中
    使用text-align   
    <div><span>居中</span></div>
    div{text-align:center;}
2.已知宽度块级元素水平居中
    使用margin:0 auto;
    <div></div>
    div{width:200px;height:25px;background-color:red;margin:0 auto;}
3.未知宽度块级元素水平居中
    a.table方式
<table>
  <tbody>
    <tr>
      <td><div>居中</div></td>
    </tr>
   </tbody>
 </table>
    table{margin:0 auto;}
    b.块级元素转为行内元素
    <div><p>居中</p></div>
    p{display:inline-block;}
    div{text-align:center;}
    c.使用相对定位
        <div><p>居中</p><p>居中</p><p>居中</p></div>
        div{float:left;position:relative;left:50%;}
        p{float:left;position:relative;left:-50%;}
    d.flex布局
        <div><p>居中</p></div>
        div{display:flex;justify-content:center;}
垂直居中
1.父元素高度不确定的文本、图片、块级元素的竖直居中
    父元素高度不确定，高度由内容撑开，高度等于行高。
    可设置padding-top和padding-bottom的值相等来撑开内容与父元素的边距。对每一个子元素同时设置vertical-align:middle;
2.父元素高度确定的单行文本竖直居中
    设置父元素line-height等于height即可。对每一个子元素同时设置vertical-align：middle;
3.父元素高度确定的多行文本竖直居中
       a.使用table布局，display:table-cell;vertical-align:middle; 存在浏览器兼容问题。
   

                                                    
1.html居中
 
margin:本身div居中
 
padding: 里面的div居中
 
2.android居中
 
<LiinearLayout
 
                    android:gravity="center"
 
> //里面控件居中
 

 
 
<LiinearLayout
 
                    android:layout_gravity="center"
 
> //本身居中
 


 


                                                    
转载于:https://my.oschina.net/moziqi/blog/327323

Html居中的用法
文章目录
Html居中的用法
前言
一、垂直居中
1.垂直居中
2.
二、水平居中
1.text-align：属性指定元素文本的水平对齐方式。
2.已知宽度块级元素水平居中
3.未知宽度块级元素水平居中
三.垂直水平居中
1.垂直居中需要知道父级容器的宽高
四.总结



前言
提示：在日常的布局中，少不了需要用到居中，所以这篇文章对于居中做了一个简单的说明

提示：居中有水平居中和垂直居中，然后比较常用的有水平居中，水平居中又可以分为行内元素和块级元素两种，块级元素又可以分为知道宽度和不知道宽度两种情况。下面案例可供参考
一、垂直居中
1.垂直居中
vertical-align: middle：vertical-align 属性设置一个元素的垂直对齐方式。


<html>
    <head>
        <meta charset="utf-8" />
        <title>helloworld</title>
    </head>
    <style type="text/css">
        .div1{
            width: 200px;
            height: 200px;
            display: table-cell;
            vertical-align: middle;
            text-align: center;     
        }
        .div2{
            background-color: orangered;
        }
    </style>
    <body>
        <div class="div1">
            <div class="div2">
               垂直居中
            </div>
        </div>
    </body>

</html>


2.
：
二、水平居中
1.text-align：属性指定元素文本的水平对齐方式。

代码如下（示例）：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">
		.center{
			 text-align:center;
		}
	</style>
</head>

<body>
	<div class="center">水平居中</div>
</body>
</html>


2.已知宽度块级元素水平居中
使用margin:0 auto;

代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">
		.center{
			 width:200px;
			height:25px;
			background-color:aqua;
			margin:0 auto;
		}
		.p1{
			text-align: center;
		}
		
	</style>
</head>

<body>
	<div class="center"><p class="p1">水平居中</p>
	</div>
</body>
</html>


3.未知宽度块级元素水平居中
父元素浮动left：50%; 同时要设置position:relative（给子元素相对定位一个参考）

子元素相对定位position：relative；left：-50%；

代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">
		.center{
			position:relative;
			background-color:aqua;
			 left:50%;
     			float:left;
		}
		.div1{
			left:-50%;
		}
		
	</style>
</head>

<body>
	<div class="center"><div class="div1">不定宽水平居中</div>
	</div>
</body>
</html>



三.垂直水平居中
1.垂直居中需要知道父级容器的宽高
首先移动子元素高度(宽度)的一半：left：50%;(top:50%）

再移动父元素高度(宽度)的一半：margin-left:-宽/2;(margin-top:-高/2;）

代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">
		.center{
			width: 200px;
    		height: 200px;
   			background-color: lightskyblue;
    		position: relative;
		}
		.div1{
			margin-top: 25%;
			  width: 100px;
 			  height: 100px;
  			  background-color: hotpink;
      		  position: absolute;
  			 
 			  margin-left:50px;
		}
		
	</style>
</head>

<body>
	<div class="center"><div class="div1">垂直水平居中</div>
	</div>
</body>
</html>



四.总结
以上就是常用的居中的方法，可能收集的不完全，我会慢慢补正。如果有不对的地方请大家指正。感谢大家可以看完。