如何实现居中对齐？

goldEli commented 4 years ago

写出你知道的所有方式

748580573 commented 4 years ago

.parent{
    margin: 0 auto;
    position: relative;
}
.child{
    position: absolute;
    top: 50%;
}

.style1{
    display: flex;
    justify-content: center;
    align-items: center;
}

lurasso commented 4 years ago

1、margin: 0 auto 2、文本居中 text-align:center(line-height等于父元素时水平垂直居中) 3、position+float定位居中 4、flex居中

FireDragonZL commented 4 years ago

[x] 1.父元素为flex布局时，使用下列属性可以使子元素居中对齐

1.justify-content : center 2.align-items : center
[x] 当父元素盒状模型布局时，使用一下属性可以进行居中对齐：

1.设置子元素 margin-left 和 margin-top 属性； 2.设置父元素的 padding-left 和 padding-top 属性；
[x] 使用一下属性可以使文本和图片居中对齐：

1.text-align 2.line-height
[x] 使用位置属性也可以使元素居中对齐：

1.父元素 position：relative； 2.子元素 position : absolute ; top : 50%

goldEli / Front-End-Training