#前端#文字、图像等元素居中方式之

元素组成

• 父级块：div；
• 子元素：img，呈现图像；
• 子元素：p，效果文字；

效果

父级div横向铺满屏幕，子元素img高度设最低最高范围，宽度自动，水平居中

*{
    margin: 0;
    padding:0;
}
.photo-area {
    position: relative;
    margin-top: 60px;
    width: 100%;
    height: auto;
    background-color:rgb(240,240,240);
}
.photo-main {
    height: auto;
    width: auto;
    min-height: 450px;
    max-height: 700px;
    display: block; /*使img成为块级元素从而可以使用样式调整*/
}
.photo-area p {
    position: absolute; /*与父元素 relative 对应使用*/
    width: 100%; /*使 p 元素本身在宽度上占满父元素*/
    text-align: center;
    top:50%; /*p 元素的上边处于父元素内高的居中位置*/
    margin-top: -40px; /*与top:50%配合，将p元素的上边再向上提高自身高度的一半，呈现p元素整体垂直居中的效果*/
    font-size: 60px;
    height: 80px; /*给定高度，与top和margin-top配合使用*/
    line-height: 80px; /*使p元素内的文字垂直居中于p元素*/
}

修改部分代码，使图像横向铺满屏幕，高度自动适应

.photo-main {
    height: auto;
    width: 100%;
    min-height: 450px;
    display: block;
}

此时应注意调用图片的本身尺寸，较大的图片效果更好

应用父级元素布局代码，使子元素自动呈现预想的布局

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap-reverse;
}

此种方式，将布局代码放在父级元素，设定之后子元素将按预设方式进行排列，优点是代码精炼简单子元素不用过多控制。适合子元素较少，或者子元素布局较为规范、简单，可查看浅谈CSS3中display属性的Flex布局 查看详情