Web前端开发web前端面试题汇总让前端飞

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;
}
上一篇下一篇

猜你喜欢

热点阅读