CSS-元素居中显示的方法
2019-07-23 本文已影响0人
loushumei
页面布局如下:
<div class="outer">
<div class="inner">内部元素</div>
</div>
[元素已知高度和宽度]
方法一 :设置父元素为相对定位,给子元素设置绝对定位,left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;
.outer{
width:500px;
height: 400px;
margin:0 auto;
background: pink;
position: relative;
}
.inner{
width:100px;
height: 100px;
background: yellow;
position: absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-50px;
}
方法二:设置父元素为相对定位,给子元素设置绝对定位,top: 0; right: 0; bottom: 0; left: 0; margin: auto;
.outer{
width:500px;
height: 400px;
margin:0 auto;
background: pink;
position: relative;
}
.inner{
width:100px;
height: 100px;
background: yellow;
position: absolute;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
}
元素未知宽度和高度
方法一:使用定位属性,设置父元素为相对定位,给子元素设置绝对定位,left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);
- Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。
- translate(x,y):元素在水平方向和垂直方向同时移动;
.outer{
width:500px;
height: 400px;
margin:0 auto;
background: pink;
position: relative;
}
.inner{
background: yellow;
position: absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
方案二:使用flex布局实现:设置父元素为flex定位,justify-content: center; align-items: center;
- justify-content:属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(横轴)对齐。
- align-items 属性应用在弹性容器上,设置或检索弹性盒子元素在侧轴(纵轴)方向上的对齐方式。
.outer{
width:500px;
height: 400px;
margin:0 auto;
background: pink;
display: flex;
justify-content: center;
align-items: center;
}
.inner{
background: yellow;
}
方案三:使用flex布局实现:设置父元素为flex定位,子元素设置margin: auto;
.outer{
width:500px;
height: 400px;
margin:0 auto;
background: pink;
display: flex;
}
.inner{
background: yellow;
margin:auto;
}