文章目录
- 一文大白话讲清楚CSS元素的水平居中和垂直居中
- 1.已知元素宽高的居中方案
-
- [1.1 利用定位+margin:auto](#1.1 利用定位+margin:auto)
- [1.2 利用定位+margin负值](#1.2 利用定位+margin负值)
- [1.3 table布局](#1.3 table布局)
- 2.未知元素宽高的居中方案
-
- 2.1利用定位+transform
- [2.2 flex弹性布局](#2.2 flex弹性布局)
- [2.3 grid网格布局](#2.3 grid网格布局)
- [3. 内联元素的居中布局](#3. 内联元素的居中布局)
一文大白话讲清楚CSS元素的水平居中和垂直居中
- 先说为啥就要讲居中，不讲别的，因为很简单，因为居中常用且关键
- 那讲一个元素居中，先得看这个元素是个什么货色了吧
- 一般有两种货色，
- 元素的宽高已知
- 元素的宽高未知
- 为啥这么分，因为宽高已知的号操作啊，我都知道你多大了，然后页面就那么大，如果你不居中我就移动呗，移动到居中
- 剩下的不知道宽高的，那没法移啊，不知道移到哪合适，那就要另外另外想办法了
- 所以，先讲宽高已知的
1.已知元素宽高的居中方案
1.1 利用定位+margin:auto
- 上代码
html
<style>
.parent{
width: 300px;
height: 300px;
border: 1px solid green;
position: relative;
}
.child{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
<div class="parent">
<div class="child"></div>
</div>- 父元素设置相对定位，子元素设置绝对定位，并且子元素的4个定位属性都设置为0，这时候如果子元素没有宽高，会被拉满父元素
- 但是这时候他有宽高，所以它显示100x100,但是这时候子元素的虚拟占位已经撑满了整个父级，如果我们再给一个margin:auto他就可以上下左右都居中了。
- 哪有又问了，凭啥margin：auto就居中了，要是不给auto，给个margin: 10 50 50 10呢。
- 那就会按照这个margin去排列。
- 说白了就是这么个意思，现在父元素下子元素的虚拟占位跟父元素一样大，然后我们把子元素的位置放进去，放进去因为不一样大，就要考虑跟父元素哪个边近一点。有可能哪个都想近一点，哪个都想远一点，那怎么办，auto，你们自己看着分吧，看着分怎么分，平分呗。所以居中了。
- 明白了没有。
1.2 利用定位+margin负值
- 直接上代码
html
<style>
.parent{
width: 300px;
height: 300px;
border: 1px solid green;
position: relative;
}
.child{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top:50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
</style>
<div class="parent">
<div class="child"></div>
</div>- 这个啥意思，这个好理解，就是我先把你top：50%，left：50%,如果子元素宽高小到极限的话是不是已经居中了，但是现在你有宽度各位一百，那怎么办，我在倒着往回移元素本身的一半不就OK了
- 上图
1.3 table布局
- 设置父元素的display：table-cell，子元素设置display:inline-block,利用vertical和text-align让所有行内块级元素水平垂直居中
- 上代码
html
<style>
.parent{
display:table-cell;
width: 300px;
height: 300px;
vertical-align:middle;
text-align: center;
border: 1px solid black;
}
.child{
display:inline-block;
width: 100px;
height: 100px;
background-color: red;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
2.未知元素宽高的居中方案
2.1利用定位+transform
- 这个跟定位+margin-负值用法是一样的
- 只不过margin-负值的时候我们需要负元素宽高的一半，所以我们必须先知道宽高是多少，然后才能写
- transform的也是负值，不过translate会自动获取元素的宽高，并以元素的宽高为基准进行百分比偏移，所以我们可以设定偏移量为元素宽高的50%
- 上代码
html
<meta charset="utf-8">
<style>
.parent{
width: 300px;
height: 300px;
border: 1px solid green;
position: relative;
}
.child{
background-color: red;
position: absolute;
top:50%;
left: 50%;
transform:translate(-50%,-50%);
/*用位移代替margin进行偏移了*/
/*margin-top: -50px;*/
/*margin-left: -50px;*/
}
</style>
<div class="parent">
<div class="child">我是子元素，我没有设置宽高</div>
</div>- 搞定
2.2 flex弹性布局
- 这个最简单，只要父元素设置display：flex，子元素通过justify-content：center和align-items：center轻松实现居中
html
<meta charset="utf-8">
<style>
.parent{
width: 300px;
height: 300px;
border: 1px solid green;
display: flex;
align-items:center;
justify-content:center;
}
.child{
background-color: red;
}
</style>
<div class="parent">
<div class="child">我是子元素，我没有设置宽高</div>
</div>- 搞定
2.3 grid网格布局
- grid网格布局和flex弹性布局用法一毛一样,但是兼容性差
- 直接上代码
html
<meta charset="utf-8">
<style>
.parent{
width: 300px;
height: 300px;
border: 1px solid green;
display: grid;
align-items:center;
justify-content:center;
}
.child{
background-color: red;
}
</style>
<div class="parent">
<div class="child">我是子元素，我没有设置宽高</div>
</div>3. 内联元素的居中布局
- 上面讲的都是块级元素的居中方式，下面讲内联元素的
- 水平居中
- 行内元素可设置text-algin：center
html
<meta charset="utf-8">
<style>
.parent{
width: 500px;
height: 300px;
text-align: center;
background-color: green;
}
.child{
background-color: red;
}
</style>
<div class="parent">
<span class="child">我是子元素，我是内联元素<br>我的水平居中只需要父元素text-align：center就行</span>
</div>
- 如果子元素的布局是flex，则父元素的justify-content：center就行
html
<meta charset="utf-8">
<style>
.parent{
width: 300px;
height: 300px;
background-color: green;
display: flex;
justify-content:center
}
.child{
background-color: red;
line-height: 300px;
}
</style>
<div class="parent">
<span class="child">我是子元素，我是内联flex元素<br>我的水平居中只需要父元素justify-content:center就行</span>
</div>
- 垂直居中
- 单行文本垂直居中，只需要让子元素的line-height=父元素的height
html
<meta charset="utf-8">
<style>
.parent{
width: 600px;
height: 300px;
background-color: green;
display: flex;
justify-content:center;
}
.child{
width: 400px;
background-color: red;
line-height: 300px;
}
</style>
<div class="parent">
<span class="child">单行文本，垂直居中line-height=父height</span>
</div>
- 多行文本父元素垂直居中，可以设置父元素display：table-cell,vertical-align:middle
html
<meta charset="utf-8">
<style>
.parent{
width: 600px;
height: 300px;
background-color: green;
display:table-cell;
vertical-align:middle;
}
.child{
width: 400px;
background-color: red;
}
</style>
<div class="parent">
<span class="child">我是多行文本，垂直居中只需要让父元素display：table-cell；vertical-align:middle</span>
</div>