未知宽高元素水平垂直居中对齐
代码前提:使用一个父盒子包含一个宽高随意的子元素,使子元素在父元素内水平垂直居中。
方式一:弹性盒子
代码思路:
- 将父盒子添加
display:flex
将其设置为弹性布局; - 给父盒子样式中添加属性
justify-content:center
和align-items:center
即可将子元素水平居中。
注:在弹性布局中,可以给设置了弹性布局的父元素样式中添加
justify-content
和align-items
属性,其中:
justify-content
用于设置主轴上子元素的排列方式,设置center
时表示在主轴居中对齐。
align-items
用于设置侧轴上子元素的排列方式,设置center
时表示在侧轴居中对齐。
方式一代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹性盒子</title>
<style>
.outer{
/* 设置子盒子水平居中 */
display: flex;
justify-content: center;
align-items: center;
/* 设置父盒子水平居中 */
margin: 0 auto;
width: 80%;
height: 500px;
background-color: pink;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
方式二:表格元素
代码思路:
- 将父盒子添加
display:table-cell
将其设置为单元格; - 给父盒子样式中添加属性
text-align:center
和vertical-align:middle
即可将子元素水平居中。 - 因为
vertical-align
属性只对行内元素和行内块元素有效,因此,要将子盒子添加display:inline-block
将其转换为为行内块。
方式二代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格元素</title>
<style>
.outer{
/* 将父级盒子设置为单元格 */
display: table-cell;
text-align: center;
vertical-align: middle;
width: 980px;
height: 500px;
background-color: pink;
margin: 0 auto;
}
.inner{
/* vertical-align只针对行内元素 | 行内块元素有效 */
display: inline-block;
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
方式三:定位
代码思路:
- 子绝父相,给父盒子设置相对定位,给子盒子设置绝对定位;
- 给子盒子添加
top
和left
边偏移量,使其向下和向右偏移父盒子的宽|高的50%,即top:50%
,left:50%
。 - 这样偏移之后还需将子盒子往回走自己宽|高的一般才能实现居中,平常可以用
margin-top:-100px
,margin-left:-100px
等(假设子盒子的宽高均为200px)来实现这个移动,但是若宽高数字较为复杂,需要进行一步多余的计算,因此这里通过transform
转换来实现这个移动,即transform:translate(-50%,-50%)
。 - 此时子盒子就在父盒子中水平垂直居中了。
知识点补充:transform转换之移动——translate:
2D移动(translate)是2D转换(transform)里的一种功能,可以改变元素在页面中的位置,类似于定位。
语法:
/* translateX 即在x轴上移动,100px即移动的距离*/ transform:translateX(100px); /* translateY 即在Y轴上移动,100px即移动的距离*/ transform:translateY(100px); /* 合并写法,x y分别表示元素在X轴或Y轴上移动的距离*/ transform:translate(x,y);
重点:
- translate最大的优点:不会影响到其他元素的位置(这是用margin和定位做不到的)
- translate中的百分比单位是相对于自身元素的:!!
- 比如
transform:translate(50%,50%)
即向X轴和Y轴分别移动自身宽或高的50%。- translate对行内标签没有作用。
方式三代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.outer{
position: relative;
width: 980px;
height: 500px;
background-color: pink;
margin: 0 auto;
}
.inner{
position: absolute;
left: 50%;
top: 50%;
/* 使元素往回移动它的宽高的-50% */
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
方式三:grid布局
代码思路:
- 将父盒子添加`display:grid将其设置为grid布局;
- 给父盒子样式中添加属性
justify-content:center
和align-items:center
即可将子元素水平居中。
注:【grid布局中这两个属性的用法于flex布局中一样】在gird布局中,可以给设置了弹性布局的父元素样式中添加
justify-content
和align-items
属性,其中:
justify-content
用于设置主轴上子元素的排列方式,设置center
时表示在主轴居中对齐。
align-items
用于设置侧轴上子元素的排列方式,设置center
时表示在侧轴居中对齐。
方式四代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.grid{
display: grid;
justify-content: center;
align-items: center;
/* 基础宽高颜色 */
width: 80%;
height: 500px;
background-color: pink;
margin: 0 auto;
}
.grid div{
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="grid">
<div></div>
</div>
</body>
</html>
总结
以上四种方式实现的布局效果均如下图,可以实现子盒子的水平垂直居中。如代码或思路有任何不足,欢迎补充。