How is the text centered vertically?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
div{
    width:300px;
    height:70px;
    border:1px solid red;
    font-size:30px;
    line-height:70px;
    vertical-align:middle; 
    text-align:center;
    padding:0px;
    margin:0px;
}
</style>
</head>
<body>
    <div>
        
hello world

    </div>
</body>
</html>

the effect is as follows:

ling-height = divheight
vertical-align:middle;

Html
Mar.12,2021

you limit div to death. If p spills over, of course it's not centered.
if you change the div in css to p, you will center

. 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
p{
    width:300px;
    height:70px;
    border:1px solid red;
    font-size:30px;
    line-height:70px;
    vertical-align:middle; 
    text-align:center;
    padding:0px;
    margin:0px;
}
</style>
</head>
<body>
    <div>
        
hello world

    </div>
</body>
</html>

text is based on line height. Line-height:70px;, if you remove the default inner and outer margins, the distance you mark should be about 35

.

parent: 

display: table-cell;
vertical-align: middle;
height: 65px;
width: 65px;

Child: 

display: inline-block;
vertical-align: middle;

see that so many gods have given you an answer, and you haven't adopted it yet. I've decided to have an ultimate answer.
and look at the picture:

divdiv

ppchromemargin1em;
1emem
font-size1emfont-size35pxmarginmargin35px;
:pfont-size,p35px

marginOK

Previous: Using iframe in vue

Next: Cordova cannot be compiled and previewed in mac system

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu