1.实现行内元素水平居中（未设置宽度）
①使用text-align：center 实现行内元素水平居中 /*div内的行内元素均会水平居中*/
1 <style> 2 .demo{ 3 text-align: center; 4 } 5 </style>
1 <div class="demo"> 2 我是一只小小鸟 3 <span>我也是一只小小鸟</span> 4 </div>
②使用line-height行内元素的垂直居中、/*div内得行内元素均会垂直居中*/、/*当然想要既水平居中有垂直居中就两个都加*/
1 <style> 2 .demo{ 3 text-align: center; 4 height: 50px; 5 line-height: 50px; 6 } 7 </style>
③使用 fit-content 和 margin;auto 支持谷歌 欧朋 火狐 360等
1 <div class="content"> 2 <img src="../css3/images/1.jpg" /> 3 </div> 4 5 .content{ 6 -webkit-fit-content; 7 -moz-fit-content; 8 margin: auto; 9 }
2.实现块级元素水平居中（以设置宽度）
①使用margin position实现水平垂直居中
1 .demo{ 2 height: 400px; 3 width: 200px; 4 border: 2px dashed red; 5 position: absolute; 6 top: 50%; 7 left: 50%; 8 margin:-200px 0 0 -100px; 9 }
1 <div class="demo">1 absolute middle </div>
②使用margin：0 auto；实现水平居中 /*块级元素的宽度必须设置，如果宽度不够文字将会竖着排列*/ 、、/*相对于父级元素水平居中*/
1 <style> 2 .demo{ 3 margin:0 auto ; 4 width: 200px; 5 } 6 </style> 7 8 <body> 9 <div class="demo"> 10 我是一个小鸟 11 </div> 12 </body>
③使用 position：absolute，margin：auto实现水平居中
1 .demo{ 2 height: 100px; 3 width: 100px; 4 position: absolute; 5 left: 0; 6 right: 0; 7 /*加上bottom:0;top:0;实现水平垂直同时居中*/ 8 margin: auto; 9 }
1 <div class="demo"> 2 我是一个小鸟 3 </div>
3.元素未设置宽度，实现水平居中
①使用table标签配合margin-left:auto，，margin-right:auto实现未设置宽度的块级元素水平居中
- 使用table标签（或直接将块级元素设置为display:table;让块级元素具备table的属性），再通过给标签添加样式margin-left，margin-right都为auto；
②使用display和text-align:center;实现未设置宽度的元素水平居中
1 .demo1{ 2 display:block; 3 text-align: center; 4 }
③使用position:absolute，transform实现为设置宽的块级元素水平居中
- transform:translateX可以使元素向X(从左向右移动)移动
- 同时也可以通过transform:translateY实现元素的垂直居中
-
View Code
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>使用</title> 6 <style> 7 .demo{ 8 position: absolute; 9 left:50%; 10 -webkit-transform: translateX(-50%); 11 } 12 </style> 13 </head> 14 <body> 15 <div class="demo">这是一个需要居中的东西</div> 16 </body> 17 </html>
④使用position:relative加上float or display 是元素变成块级元素，从而是为设置宽度的元素居中
- 必须把父级元素设置为行内块元素display:inline-block
- 必须是外父元素left相对定位，内(目标元素)设置right相对定位
-
View Code
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 .content{ 8 position: relative; 9 display: inline-block; 10 left: 50%; 11 } 12 .demo{ 13 position: relative; 14 right: 50%; 15 } 16 </style> 17 </head> 18 <body> 19 <span class="content"> 20 这是一个行间元素 21 <div class="demo"> 22 我认为你说的很对 23 </div> 24 </span> 25 </body> 26 </html>
⑤CSS3的flex实现水平居中方法，法一
.contentdemo{
display: flex;
flex-direction: column;
}
. content{
align-self:center;
}
⑥CSS3的flex实现水平居中方法，法二
. contentdemo{
display: flex;
}
. content{
margin: auto;
}
⑦CSS3的fit-content配合左右margin为auto实现水平居中方法
. content{
fit-content;
margin-left: auto;
margin-right: auto;
}
⑧子盒子未设置宽度（常常使用）
contnet{
positiion:absolute|relative;
left:50%;
top:50%;
/*translate(-50%,-50%) 偏移自身的宽和高的-50%*/
transform:translate(50%,50%) 注意这里启动了3D硬件加速哦 会增加耗电量的 （至于何是3D加速 请看浏览器进程与线程篇）
}
4.最后介绍一种强大的兼容模式(元素未设置宽度|设置宽度)都可行
html. <div class="wrap"> <div class="inside"> 这是一段需要垂直居中的文本 </div> </div> css, .warp{ display:table; text-align:center; 100px;/*可有可无*/ height100px; /*可有可无*/ } .insid{ display: table-cell; height: 200px; background-color: yellow; vertical-align: middle; }
实现原理:通过display将元素变为具有table的块级元素，通过display：table-cell将子元素设置为表格单元格格式，再通过vertical-align实现文本的垂直居中，以及text-align：center实现文本的水平居中
5.最近发现了一种新的垂直居中的方法【未设置宽高】20190323
①设置的是父元素绝对定位加上下移动，子元素transform左右移动
html. <div class="demo" > <h1 id="demo"></h1> </div> css. .demo{ position: absolute; left:50%; top: 50%; -o-transform:translateY(-50%);/* opera */ -ms-transform:translateY(-50%);/* ie */ -moz-transform:translateY(-50%)/* Firefox */ -webkit-transform: translateY(-50%);/* google safari */ } h1{ -webkit-transform: translateX(-50%); }
②只需要设置子元素移动即可 使用到了绝对定位，旋转等，上代码
html. <div class="bg"> <div class="dome">忍一时风平浪静，退一步海阔天空</div> </div> css. .dome{ position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); text-align: center; z-index: 22; }
①②③④⑤⑥⑦⑧⑨