CSS vertical centering code

Report · Mar 24, 2020

I need to position a paragraph vertically centered to all ebook readers. I added this code to a paragraph style in CSS to center a single line of text:

margin: 50vh 0 0 0; /* vh stands for viewport height*/

-webkit-transform: translateY(-50%);

transform: translateY(-50%);

This worked perfectly.

Does anyone have the code for vertically centering a multiline paragraph added to the paragraph style? I apologize, I am not a programmer.

Thank you!

LR

Report · Mar 24, 2020

Adobe currently has 23 programs included in a full Cloud subscription
Please post the name of the Adobe program you use so a Moderator may move this message to that forum

Report · Mar 24, 2020

Sorry... I am using INDESIGN CC, but I am editing the output as epub folder in Dreamweaver CC

Report · Mar 24, 2020

Which software are you using?

Depending on which devices and browsers you are targeting, modern CSS flexbox or CSS grids can do this quite nicely. Below is a CSS Grid example.

CSS Grids

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Grids - vertical centering</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
body, html {
margin: 0;
height: 100%;
display: grid;
background: #333 url(https://placeimg.com/1200/900/nature) no-repeat center center;
background-size: cover;
}
main {
padding: 2%;
width: 80%;
text-align: center;
margin: auto;
background-color: rgba(0,0,0,0.5);
color: #FFF;
}
</style>
</head>
<body>
<main>
<h3>Welcome to CSS Grids!</h3>
<p>I'm vertically &amp; horizontally centered text over a full-sized page background image.</p>
</main>
</body>
</html>

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Mar 24, 2020

thank you. I'll try this...

Adobe Community

CSS vertical centering code