使用CSS在容器内垂直对齐文本

Question

I'm pretty new to CSS and I'm trying to vertical-align: middle some text inside a div. This has been asked before, but I can't get any of the solutions to work for me, so I must be missing something obvious.

I've tried:

Having the text in a <p> tag and in CSS adding vertical-align: middle; to the <p> tag.

Having the text in a <p> tag and in CSS adding vertical-align: middle; to the parent div.

Having the text in a <div class="flex-container"> and in CSS adding

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

As here: https://jsfiddle.net/dt3kvmdm/

The parent div doesn't have a fix height in px. Instead it's a percentage. One solution to a similar question suggested that this could be a problem, but I'm not clear on it. It would be helpful to me to be able to keep it as a percentage.

I'll be very happy to hear any suggestions!

Thanks a lot!

Nick.

Answer 1

You need to use display: flex on parent element or set height: 100% on child element Fiddle

 .ProjectTitle { background-color: green; position: absolute; width: 100%; height: 20%; bottom: 0; display: flex; justify-content: center; align-items: center; } .flex-container { font-family: "Taviraj", serif; color: #000; letter-spacing: 0.11em; } 

 <div class="ProjectTitle"> <div class="flex-container"> Project Title </div> </div> 

Answer 2

I'm not sure if I completely understand what you're wanting, but see if this helps:

HTML:

<div class="ProjectTitle">
    <div class="flex-container">
        <p>Project Title</p>
    </div>
</div>

CSS:

.ProjectTitle {
    background-color: green;
    position: absolute;
    width: 100%;
    height: 20%;
    bottom: 0;
}

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Taviraj", serif;
    color: #000;
    letter-spacing: 0.11em;
    line-height: 20%;
    height: 100%;
}

.flex-container p {
    color: #ffffff;
    vertical-align: middle;
}

Fiddle: https://jsfiddle.net/dt3kvmdm/1/