前言
本文重点介绍水平居中，垂直居中，还有水平垂直居中各样办法，思维导图如下：
1、水平居中
1.行内元素水平居中
利用 text-align: center 能够实此刻块级元素内部的行内元素水平居中。此办法对inline、inline-block、inline-table和inline-flex元素水平居中都有效。
.parent{//在父容器设置
text-align:center;
}
另外，倘若块级元素内部包着亦是一个块级元素，咱们能够先将其由块级元素改变为行内块元素，再经过设置行内块元素居中以达到水平居中。
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent{
text-align:center;
}
.child {
display: inline-block;
}
</style>
2.块级元素的水平居中
这种情形能够有多种实现方式，下面咱们仔细介绍:
①将该块级元素上下外边距margin-left和margin-right设置为auto
.child{
width: 100px;//保证该块级元素定宽
margin:0 auto;
}
②运用table+margin
先将子元素设置为块级表格来表示（类似），再将其设置水平居中
display:table在表现上类似block元素，然则宽度为内容宽。
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
display: table;
margin: 0 auto;
}
</style>
③运用absolute+transform
先将父元素设置为相对定位，再将子元素设置为绝对定位，向右移动子元素，移动距离为父容器的一半，最后经过向左移动子元素的一半宽度以达到水平居中。
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
position:absolute;
left:50%;
transform:translateX(-50%);
}
.parent {
position:relative;
}
</style>
不外transform属于css3内容，兼容性存在必定问题，高版本浏览器必须添加有些前缀。
④运用flex+justify-content
经过CSS3中的布局利器flex中的justify-content属性来达到水平居中。
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: flex;
justify-content:center;
}
</style>
⑤运用flex+margin
经过flex将父容器设置为为Flex布局，再设置子元素居中。
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.parent {
display: flex;
}
.child {
margin:0 auto;
}
</style>
3.多块级元素水平居中
| 
发表于 2024-6-30 09:55:18
