CSS布局对齐⽅式--⽔平居中、垂直居中、⽔平垂直居中
⼀、⽔平居中：
（1）⾏内元素的⽔平居中
如果被设置的元素为⽂本、图⽚等⾏内元素时，在⽗元素中设置text-align:center实现⾏内元素⽔平居中，将⼦元素的设置为display:inline-block，使⼦元素变成⾏内元素；css设置文字垂直居中
<div class="parent" >
<div class="child" >demo</div>
</div>
<style>
.parent {
text-align: center;
}
.child {
display: inline-block;
}
</style>
(2)块状元素的⽔平居中（定宽）
当被设置元素为定宽块级元素时⽤text-align:center；就不起作⽤了。可以通过设置“margin: 0 auto;”来实现居中的。
<div class="parent" >
<div class="child" >demo</div>
</div>
<style>
.child {
width: 200px;
margin: 0 auto;
}
</style>
(3)块状元素的⽔平居中（不定定宽）
在实际⼯作中，我们会遇到需要为“不定宽度的块级元素”设置居中，如⽹页上的分页导航，因为分页的数量是不确定的，所以，不能通过设置宽度来限制它的弹性。
可以直接给补丁款的块级元素设置text-align:center；来实现，也可以给⽗元素加text-align:center；来实现居中效果。
当不定宽块级元素的宽度不要占⼀⾏时，可以设置display为inline类型或inline-block（设置为⾏内元素显⽰或⾏内块元素）。
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<style>
.container {
text-align: center;
background: beige;
}
.
container ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
}
.container li {
margin-right: 8px;
display: inline-block;
}
</style>
⼆、垂直居中
和⽔平居中⼀样，垂直居中，⾸先需设定两个条件即⽗元素是盒⼦容器且⾼度已经设定。
（1）⼦元素是⾏内元素，⾼度是由其内容撑开的。
这种情况下，需要通过设定⽗元素的line-height为其⾼度来使得⼦元素垂直居中。
<div class="wrap line-height">
<span class="span">111111</span>
</div>
<style>
.wrap {
width: 200px;
height: 300px;
line-height: 300px;
border: 2px solid #ccc;
}
.span {
background: red;
}
</style>
(2)⼦元素是块级元素但⼦元素⾼度没有设定，在这种情况下，实际上是不知道⼦元素的⾼度的，⽆法通过计算得到padding或margin来调整。
可以通过给⽗元素设定display:table-cell;vertical-align:middle；来解决。
<div class="wrap">
<div class="non-height">111111</div>
</div>
(3)⼦元素是块级元素且⾼度已经设定
计算⼦元素的margin-top或margin-bottom，计算⽅法为⽗（元素⾼度-⼦元素⾼度）/ 2；
<div class="wrap">
<div class="div1">111111</div>
</div>
<style>
.wrap {
width: 200px;
height: 300px;
border: 2px solid #ccc;
}
.div1 {
width: 100px;
height: 100px;
margin-top: 100px;
background: darkblue;
}
</style>
三、⽔平垂直居中
（1）⽔平对齐+⾏⾼
text-align + line-height实现单⾏⽂本⽔平垂直居中
<style>
.test {
text-align: center;
line-height: 100px;
}
</style>
<div class="test" ></div>
(2)⽔平+垂直对齐
①text-align + vertical-align 在⽗元素设置text-align和vertical-align，并将⽗元素设置为table-cell元素，⼦元素设置为inline-block元素。<style>
.parent {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.child {
display: inline-block;
}
</style>
<div class="parent" child" >测试⽂字</div>
</div>
②若⼦元素是图像，可不使⽤table-cell，⽽是其⽗元素⽤⾏⾼代替⾼度，且字体⼤⼩设为0。⼦元素本⾝设置vertical-align:middle;
<div class="parent" >
<img class="child" src="images/1.png" width="50%" alt="test">
</div>
<style>
.parent {
text-align: center;
line-height: 100px;
font-size: 0;
}
.child {
vertical-align: middle;
}
</style>
(3)相对+绝对定位
使⽤absolute，利⽤绝对定位元素的盒模型特性，在偏移属性为确定值的基础上，设置margin: auto;
<div class="parent" child" >测试⽂字</div>
</div>
<style>
.parent {
position: relative;
}
.
child {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 80px;
margin: auto;
}
</style>
PS:01、补充《三》中的⽔平垂直居中的⽅式（2018/08/29）
translate()函数可以在不知道⾃⾝宽⾼的情况下，利⽤它进⾏⽔平垂直居中。但是，有兼容性问题，⽀持IE9+的游览器。
使⽤translate函数，配合left，top属性，可以让⽬标元素始终保持⽔平垂直居中，当游览器窗⼝发⽣变化时，也能⼀直保持⽔平垂直居中。<div class="wrap">
不知道宽⾼，可以⽔平垂直居中
</div>
<style>
.wrap {
padding: 10px;
background: green;
color: #fff;
border-radius: 5px;
position: absolute;
top: 50%;
left: 50%;  /*定位margin-left:50%的位置*/
-webkit-transform: translate(-50%,-50%); /*Safari,Chrome*/
-moz-transform: translate(-50%,-50%);  /*IE9+*/
transform: translate(-50%,-50%); /*使元素本⾝向左移动宽度的⼀半*/
/*transform使元素在当前位置分别往x轴，y轴正向平移⾃⾝宽度的⼀半距离。*/
}
</style>
02、补充《三》中的⽔平垂直居中的⽅式（2018/11/29）
场景：使⽤背景图⽚属性，使图⽚在⽗元素的盒⼦中始终居中，但是，背景图⽚的尺⼨⼤⼩不固定。
关键：background-position:center center;(background-position:50% 50%;)属性。
<div class="index-imgBlock">
<div class="index-image"></div>
</div>
<style>
.index-image {
height: 268px;/*选取三张图⽚中最⼤⾼度的尺⼨设定*/
width: 100%;
max-width: 484px; /*选取三张图⽚中的最⼤宽度的尺⼨设定*/
background: url(images/403.png);      /*403图⽚尺⼨为484*206*/
/*background: url(images/404.png);*//*403图⽚尺⼨为428*268*/
/
*background: url(images/500.png);*//*500图⽚尺⼨为475*236*/
background-position: center center;
border: 1px solid #333333;
}
</style>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。