Whenever I apply vertical-align:center to a text while within a div, it simply stops caring for the div and stretches out into infinity, unbothered by things like word-break, word-wrap and other such commands. Is this just a thing with vertical-align or am I doing something wrong here?

HTML

<div class="rectangle" id="blue" style="margin: 10px 10px;">
    <p style="vertical-align: center; line-height: 150px; word-wrap: normal; word-break: normal;">This text here is the problem child, it for some reason just bricks and decides its better than word-wrap or break, highly frustrating and costing me a lot of sanity.
    </p>
</div>

CSS

* {
    margin:0;
    padding:0;
}

body {
    background-color: red;
}

p {
    font-size:14px;
    color:#000000;
}

.rectangle {
    box-sizing: border-box;
    width: 550px;
    height: 150px;
    padding: 0 40px 0 40px;
    word-break: normal;
}

#blue {
    background-color:#0000ff;
}

Like said in the question itself and seen in the code I tried to add word-wrap and word-break to make the text correct itself to no avail, I want to keep the text centered but also in a way where it doesn’t constantly escape the div and go into oblivion.