Add a parent element to the text that needs to be centered vertically, set the display:table for the parent element, and set the vertical-align:middle for the child element that needs to be centered; Display:table-cell;
1 <!DOCTYPE HTML>2 <HTMLLang= "zh">3 <Head>4 <MetaCharSet= "UTF-8" />5 <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0" />6 <Metahttp-equiv= "X-ua-compatible"content= "Ie=edge" />7 <title>CSS percent height text horizontally vertically centered</title>8 <styletype= "Text/css">9 *{Ten margin:0; One padding:0; A } - Html,body,.wrap{ - Height:100%; the background:Cornflowerblue; - font-size:30px; - } - . Content{ + Height:100%; - Display:Table; + margin:0 Auto;/*Control text Horizontal Center*/ A } at . Text{ - Height:100%; - vertical-align:Middle; - Display:Table-cell; - } - </style> in </Head> - <Body> to <Divclass= "Wrap"> + <Divclass= "Content"> - <Divclass= "text"> the css percent height text horizontally vertically centered * </Div> $ </Div>Panax Notoginseng </Div> - </Body> the </HTML>
CSS is vertically centered at percent height