如何实现文字在div里垂直居中

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>填充</title>
<style type="text/css">
#box1{
    text-align:center;
    word-wrap:break-word;
    width:100px;
    height:100px;
    padding:10px;
    border:5px solid white;
    margin:auto;
    background:red;
}
body{
    background:blue;
}
</style>
</head>
<body>
<div id="box1">盒子盒子盒子盒子盒子盒子
</div>
</body>
</html>

稻草人F

浏览 1840回答 4

4回答

刚毅87

单行文字 :line—height：100px多行文字,你参考一下.方法一:#box1{ display: flex; justify-content: center; align-items: center; }方法二:给文字加个标签,例如 p 标签 #box1{ position:relative p{ position:absolute; top:50%; margin-top:XXXpx; } XXX为文字高度的一半

chouryo

行高跟div盒子的高一样高。前提是只有一行字。

慕仰0931076

line—height：100px

随时随地看视频慕课网APP