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
如对本文有疑问， 点击进行留言回复！！
清除新版Google Chrome浏览器中表单控件（input，button...）默认的黑色边框
荐 20200714——git/mac配置/项目运行步骤/一些报错
antd 菜单组件 使用时报错：Cannot read property ‘isRootMenu‘ of undefined
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来
硬件仪表盘账号建立指导（一） --WHQL认证测试结果提交账号（一）
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系
网友评论