1.CSS的水平居中，
1.1 父元素是块状元素，子元素为行内元素的居中，直接设置text-aglin: center ,常见的文本，span 标签，button,img等行内元素都是可以使其水平居中的
.box{ text-align: center; } <div class="box"> <span>11111</span> <button>123</button> </div>
1.2 父元素为块状元素，子元素也为块状元素
1.2.1 子元素宽度已知，则可以设置子元素 margin 0 auto,就可以使子元素相对于父元素水平居中
<style> .box{ background-color: pink; } .con-box{ width: 300px; margin: 0 auto; height: 30px; background-color: aqua; } </style> <div class="box"> <div class="con-box"> </div> </div>
1.3 父元素为块状元素，子元素为块状元素宽度不定，直接设置子元素display:inline, 然后设置 父元素的text-aglin:center
<style> .box{ background-color: pink; text-align: center } .con-box{ display: inline; } </style> <div class="box"> <div class="con-box"> 111111 </div> </div>
注： 使用弹性布局，使用定位，都是可以使子元素相对于父元素水平居中的
2.垂直居中
2.1 父元素为块状元素，子元素为行内元素，如单行文本，直接设置父元素的line-height 等于父元素的高度，
<style> .box{ background-color: pink; height: 50px; line-height: 50px; } .con span{ line-height: 50px; } </style> <div class="box"> <span> 111111</span> </div>
2.2 父元素为块状元素，子元素为多行文本，则设置父元素的line-height 等于父元素高度除于行数，
.box{ background-color: pink; height: 50px; line-height: 25px; } .con span{ line-height: 50px; } <div class="box"> <span> 111111</span><br> <span> 111111</span><br> </div>
2.3 父元素为块状元素，子元素也为块状元素，
2.3.1 子元素高度未知，改变父元素的display 属性 设置为 table-cell,然后设置vertical-align:middle;
<style> .box{ background-color: pink; height: 50px; display: table-cell; vertical-align:middle; } .box .con-box{ background-color: aqua; } </style> <div class="box"> <div class="con-box"> 1111 </div> </div>
2.3.2 子元素高度已知，则设置margin-top，元素高度减去子元素高度除于2; 记住一定要设置父元素的overflow: hidden;
（相邻块状元素 margin会共享，取最大值，不设置overflow: hidden，子元素的margin-top:10px 会跑到父元素上）
<style> .box{ background-color: pink; height: 50px; overflow: hidden; } .box .con-box{ margin-top: 10px; height: 30px; line-height: 30px; background-color: aqua; } </style> <div class="box"> <div class="con-box"> 1111 </div> </div>
2.3.3 子元素为图片，直接可以设置父元素display: table-cell; vertical-align: middle;
<style> .box{ background-color: pink; height: 450px; display: table-cell; vertical-align: middle; } </style>
2.3.4 子元素为多个，比如图片，外加别的行内元素，使用2.3.3，文本可以不用改变，必读给图片加 vertical-align: middle;
<style> .box{ background-color: pink; height: 450px; display: table-cell; vertical-align: middle; } img{ vertical-align: middle } </style> <div class="box"> <img src="../xunguang-4.jpg" alt=""> <span>12123123</span> 1111111 </div>
3.CSS 水平垂直居中 上面两两组和使可以实现的，我们主要看一下定位和flex 实现水平垂直居中
3.1子元素高度未知，高度已知的块状元素水平垂直居中，（宽度未知，块状元素肯定使占满整行的，就不存在水平居中了）
3.1.1使用定位配置，配合margin 0 auto ,top 50%,宽度未知，只能使用transform:translateY(-50%);
<style> .box{ background-color: pink; height: 450px; position: relative; // relative 默认沾满整行，absolute话，未设置宽度则由子元素撑开 overflow: hidden; } .box .con-box{ position: relative; width: 300px; margin: 0 auto; background-color: aqua; top:50%; transform: translateY(-50%); } </style> <div class="box"> <div class="con-box"> 123123123123 <br> 1222222222 </div> </div>
3.1.2，使用定位，子元素 left 0 right 0 top 0 bottom 0 margin auto （一定要注意父子元素的定位属性）
<style> .box{ background-color: pink; height: 450px; position: relative; /* 父元素一定为relative */ overflow: hidden; } .box .con-box{ position: absolute; /* *子元素一定 为absolete*/ width: 300px; background-color: aqua; top:0; left: 0; right: 0; bottom: 0; margin: auto; } </style> <div class="box"> <div class="con-box"> 123123123123 <br> 1222222222 </div> </div>
3.2 ，子元素宽度，高度都已知，3.1 上的两种方法都适用宽度高度已经的子元素水平垂直居中
3.2.1 margin-top: -width/2 具体的值， transform: translateY(-50%) 这个有兼容性问题，需要ie9以上，具体宽度值则无兼容性问题，
<style> .box{ background-color: pink; height: 450px; position: relative; overflow: hidden; } .box .con-box{ position: relative; width: 300px; height: 400px; margin: 0 auto; background-color: aqua; top:50%; margin-top: -200px } </style> <div class="box"> <div class="con-box"> 123123123123 <br> 1222222222 </div> </div>
上面方法的变化版
<style> .box{ background-color: pink; height: 450px; position: relative; overflow: hidden; } .box .con-box{ position: relative; width: 300px; height: 400px; background-color: aqua; top:50%; left: 50%; margin-top: -200px; margin-left: -150px; } </style> <div class="box"> <div class="con-box"> 123123123123 <br> 1222222222 </div> </div>
4 flex 水平垂直居中
flex 主轴上居中，交叉轴上居中，flex 有很大的兼容性问题，一般用于移动端，很简单
<style> .box{ background-color: pink; height: 450px; display: flex; justify-content: center; align-items: center } .box .con-box{ width: 300px; height: 400px; background-color: aqua; } </style> <div class="box"> <div class="con-box"> 123123123123 <br> 1222222222 </div> </div>
多个子元素也一样实现
子元素可以单独设置对其方式
<style> .box{ background-color: pink; height: 450px; display: flex; justify-content: center; align-items: center } .box .con-box{ width: 200px; height: 400px; background-color: aqua; } .box .con-box2{ width: 200px; height: 400px; background-color: lightcyan; } .box .con-box3{ width: 200px; height: 400px; background-color: gold; align-self: flex-end; } </style> <div class="box"> <div class="con-box"> 123123123123 <br> 1222222222 </div> <div class="con-box2"> 123123123123 <br> 1222222222 </div> <div class="con-box3"> 123123123123 <br> 1222222222 </div> </div>
总结
1.水平居中，能使用margin: 0 auto ,这最简单的，不能的话就把子元素转化成inline,然后使用text-aglin：center,无兼容性问题。
上面达不到需求，可以考虑使用定位，移动端能使用flex 就使用flex
2. 垂直居中，单行文本，使用line-height 等于父元素高度，如果不行，就可以设置父元素display:table-cell，vertical-align: middle;
能解决一大部分问题，如果还不行就考虑定位配合margin-top:-width/2，使用margin。移动端能使用flex 就使用flex.
如果您还有更好的方法，欢迎给我留言，共同学习，共同进步。up
查看更多关于【css教程】的文章
