There are two ways:
1) Multiple CSS for first line, middle lines and last line
2) A single CSS for one paragraph
1) This allows total control, and is similar to how a verse of poetry is done, except it uses text-align: left and a left margin etc.
<p class="break-start">*~=^;^=~*</p>
<p class="break-body">London, England</p>
<p class="break-body">June 1873</p>
<p class="break-end">*~=^;^=~*</p>
2) This is inflexible because the line spacing is defined by font or user:
<p class="scene-break">*~=^;^=~*<br />
London, England<br/>
June 1873<br/>
*~=^;^=~*</p>
CSS (assumes default & padding CSS for p, body or html is 0)
.break-start {
text-align: center;
margin-top: 0.5em; /* or whatever */
}
.break-body {
text-align: center;
margin-top: 0.2em; /* or whatever, or missing or 0 */
margin-bottom: 0.2em; /* or whatever, or missing or 0 */
}
.break-end {
text-align: center;
margin-bottom: 0.5em; /* or whatever */
}
.scene-break {
text-align: center;
margin-top: 0.5em; /* or whatever */
margin-bottom: 0.5em; /* or whatever */
}
Do not put line-height as that disables user GUI line spacing, use margins. Without a line-height set the font metrics set the line spacing, unless user overrides.
Don't set left and right margins on anything using text-align: center;
Padding mostly not needed as it is for top or bottom of a page or maybe some other container. Top and bottom margin set spacing between lines, added to default line spacing. Both margin-top: 0; and margin:0; means use default font or user line spacing, not zero space.
The last line before } need not have a ;