整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
<div id="parent">
<!-- 定义子级元素 -->
<div id="child">居中布局</div>
</div>过以下CSS样式代码实现水平方向居中布局效果
.parent{display:table-cell;vertical-align:middle;}优点:
浏览器的兼容性比较好
缺点:
vertical-algin属性具有继承性, 导致父级元素的文本也是居中显示的
面布局中最常见的需求就是元素或者文字居中了，但是根据场景的不同，居中也有简单到复杂各种不同的实现方式，本篇就带大家一起了解下，各种场景下，该如何使用 CSS 实现居中
页面布局中最常见的需求就是元素或者文字居中了，但是根据场景的不同，居中也有简单到复杂各种不同的实现方式，有的特定场景下可能还有一些稀奇古怪的bug，本篇就带大家一起了解下，各种场景下，该如何使用 CSS 实现居中
根据应用场景，我们把居中的需求分为与盒子相关的居中和内容相关的居中，盒子相关的居中比较好理解，也是我们比较常见的应用场景，内容相关实际也很常用，只是平时注意得比较少，但如果对概念理解不清晰，实现出来的效果可能经常会偏差那么一丢丢，然后就开始穷举法解决问题了，这里也是我们本次讨论的重点
盒子模型相关的居中基本上可以根据盒子有没有给定宽高度分为分为两大类
我们先预设一下页面结构设置样式
<div class="parent">
<div class="children"></div>
</div>给定宽高的场景比较简单，能获取到元素的宽高那么直接计算子元素需要的偏移量就可以了，或者借助表格元table-cell现居中，但是大部分时候我们遇到的场景是不确定，并且不确定的解决方案可以向下兼容给定宽高的，这里就不过多赘叙了，直接看下一种情况
宽高不固定时，主流的解决方案有两种，一种是使用弹性布局，另一种是使用定位
.parent {
display: flex;
justify-content: center;
align-items: center;
}.children {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}.parent {
position: relative;
}
.children {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}基本现在浏览器对弹性布局的支持已经很好了，也是主流的居中解决方案，放心用即可
提到内容，最常想到的就是文字，图片，icon这些，这些元素的对齐大部分时候都是根据基准线来实现的baseline，可以使用设置行高line-height（这种方案有瑕疵，后面会详细介绍），文字居中属性text-align来实现，当然也可以转换成弹性布局来实现居中，都是可以的
这里我们举一个稍微特殊点的案例来进行分析，看应该如何进行居中
结构
<div class="parent">
<span class="children1">HelloWorld</span>
<span class="children2">世界你好</span>
</div>样式
.parent {
width: 100%;
height: 100px;
background-color: aquamarine;
}
.children1 {
font-size: 42px;
background-color: red;
}
.children2 {
font-size: 18px;
background-color: yellow;
}.parent {
display: flex;
justify-content: center;
align-items: center;
}简单省心，达到效果
.parent {
line-height: 100px;
text-align: center;
}这个时候就会发现，水平方向使用text-align来居中没有问题，但是垂直方向出来的效果就和预想的有偏差了，我们先来分析为什么会这样
line-height 等于元素高度的时候文本并不是真的居中了，而是看着居中了，当元素高度和font-size差距较大的时候，这种不是真正的居中就越发的明显
line-height，指的是两行文字基线之间的距离（这说法实际有点争议，也可以字面理解就行的高度），如果 line-height 刚好等于盒子的高度，那么意味着基线就在盒子一半的位置，这样就实现了内容的垂直居中
我们在用line-height实现文字垂直居中的时候，有个前提，一个是单行元素，另外没有多种内联元素（不同大小的图片，文字，icon等等），不然你会在对齐内联元素的时候遇到很多麻烦
那么如何解决这个问题呢，首先要了解，行内元素在垂直方向的定位，是基于什么，先来看一张图，可能大家在其它地方也看过，辅助我们理解
在父元素定义了line-height的条件下，vertical-align的作用是让（inline/inline-block）子元素依据父元素的基点对齐。
根据上图示意，不难看出，不管文字的大小，它们都是基于基线（baseline）来确定垂直方向的定位（可看helloWorld和世界你好的底部是在同一水平线的）
看到这里有的同学应该就想到了，可以通过设置vertical-align修改对齐方式不就好了吗？我们来试试先把世界你好的设置下vertical-align: middle试一试
可以看到耶，为什么没有效果，这时可能同学就要急了，但先别急，你在把HelloWorld也设置一下试试
.children1 {
font-size: 42px;
background-color: red;
vertical-align: middle;
}
.children2 {
font-size: 24px;
background-color: yellow;
vertical-align: middle;
}这个时候效果就出来了，怎么样，是不是很神奇~
我们再来一起看 vertical-align
vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐
如果我们只设置一个元素的 vertical-align 属性的化，那么就是后设置的和前面的对齐，我们可以把这两个大小字体调换下顺序，然后单独给HelloWorld设置middle
可以看到这个字体是有点向下偏移一点点，原因就是这时它是跟小字号的baseline对齐了
我们同样把两个都设置成middle再看下
这时就正常啦~简单总结一下，就是在使用vertical-align这个属性进行垂直对齐居中时，一定要注意，如果有多个元素，一定要保证他们的基准线是一致的，这样才能达到我们想要的效果
者 | 开课吧无忧
编辑 | 开三金
来源 | 开课吧前端团队（ID:KKBWeb）
经常碰到有同学在问，如何让一个元素上下左右都居中呢？
相信大家在面试的时候也会经常碰到这个问题，一下列出来几种方式以供大家参考，如有不足之处，请大家补充
问题描述：
给定两个元素，这两个元素是父子级关系。
并且两个元素的大小都是不确定的，那么这时候如何让子级在父级中上下左右都居中？（暂且设定父级比子级要大一些）
先上代码及效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width:500px;
height:300px;
border:1px solid #0a3b98;
position: relative;
}
.box{
width:100px;
height:40px;
background: #f0a238;
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>思路：父级相对定位，子级绝对定位 而四个定位属性的值都设置了0；
那么这时候如果子级没有设置宽高，则会被拉开到和父级一样宽高。
而现在设置了子级的宽高，所以宽高会按照我们的设置来显示；
但是实际上子级的虚拟占位已经撑满了整个父级，这时候再给它一个margin：
auto它就可以上下左右都居中了
先上代码，效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width:500px;
height:300px;
border:1px solid #0a3b98;
position: relative;
}
.box{
width:100px;
height:40px;
background: #f0a238;
position: absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>
思路：父级相对定位，子级绝对定位，而top，left这两个属性的如果给百分比；
那么这个百分比则是相对于父级的宽高来进行计算的；
如果只给定这两个值，则子级的右上角会和父级的中心点对齐，得到下图：
这时候则需要进一步操作：
css3中的位移属性，则是根据自身来计算百分比的；
所以只需要利用这个属性把自身再往左上角各移动50%就可以让子级在父级中上下左右都居中了
代码及效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width:500px;
height:300px;
border:1px solid #0a3b98;
text-align: center;
}
.content:before{
content: '';
height:100%;
width:0;
display: inline-block;
vertical-align: middle;
}
.box{
width:100px;
height:40px;
background: #f0a238;
display: inline-block;
vertical-align: middle;
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>思路：
首先，把子级转换成内联块元素，那么左右居中就可以直接利用text-align:center搞定了，而这个方法难点就在上下居中上。
子级是一个内联块元素，当然不可能说给父级设置一个行高子级就乖乖的上下居中了。
所以需要更加复杂的操作：
首先给子级设置垂直对齐方式：vartical-align 这个属性只对内联元素以及内联块元素起作用；
它有这么些值：top,bottom,middle等等 我想这些值的意思就不需要我解释了。
但是这个属性有一个缺点：需要一个参照物，也就是说如果父级里面有两个子元素，两个子元素都设置了vertical-align:middle，那么得到的效果只是这两个元素之间居中对齐而已。
并不会把两个子元素都放在父级的中间。
小技巧一：把其中一个元素设置高度百分百，那么这时候另一个元素就会处于父级上下居中的位置了。
如图：
但是这时候就多出来了一个元素了，与需求不符。
当然了，如果说你在实际布局中，确实有两个元素，并且其中一个元素可以设置为高度百分百的话，这么做是可以的。
小技巧二：想办法把另一个元素消除掉——利用伪元素before，详情请看代码。
tips：其实这时候给父级设置一个和父级高度一样的行高也是可行的，不过这个原理太复杂，大家有兴趣可以研究一下哦！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width:500px;
height:300px;
border:1px solid #0a3b98;
display: flex;
justify-content: center;
align-items: center;
}
.box{
width:100px;
height:40px;
background: #f0a238;
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>效果图就不看了吧，思路感觉也没啥可解释的，这都是css3的功劳，没啥技巧，掌握了弹性盒模型就能掌握这个方法，简单粗暴。
快去看看弹性盒模型吧，以后我有时间心情好的话再专门写点这方面的东西
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
width:500px;
height:300px;
border:1px solid #0a3b98;
display: grid;
justify-content: center;
align-items: center;
}
.box{
width:100px;
height:40px;
background: #f0a238;
}
</style>
</head>
<body>
<div class="content">
<div class="box"></div>
</div>
</body>
</html>这个方法和弹性盒模型一样，简单粗暴，没啥可说的。
grid网格布局出来没多久，权当做个了解吧，不过这玩意很强大，大家有时间可以了解一下。
Good Luck ！
*请认真填写需求信息，我们会在24小时内与您取得联系。
