css怎么让盒子水平居中方法（div盒子垂直居中）

林渲岚优秀作者

原创内容来源：小居数码网时间：2024-08-13 17:20:01 阅读() 收藏：47 分享：73 爆

导读：您正在阅读的是关于【数码知识】的问题，本文由科普作家协会，生活小能手，著名生活达人等整理监督编写。本文有248个文字，大小约为1KB，预计阅读时间1分钟。

一、盒子里的字，默认是位于盒子内的左上角，如何让它水平居中，垂直居中呢。

div盒子垂直居中

text-align: center;/* 这是让内容水平居中 */
line-height: 200px; /* 这是让内容垂直居中,只要把行高设置得和盒子的高度一样 */

图1

图2

以下是我在vscode下做的代码：

图3

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .hz{ width: 300px; height: 200px; background: #f00; margin: 100px 0px 0px 200px; text-align: center; /* 这是让内容水平居中 */ line-height: 200px; /* 这是让内容垂直居中,只要把行高设置得和盒子的高度一样 */ } </style></head><body> <div >我是盒子里的字</div></body></html>

上面就是小居数码小编今天给大家介绍的关于（div盒子垂直居中）的全部内容，希望可以帮助到你，想了解更多关于数码知识的问题，欢迎关注我们，并收藏，转发，分享。

94%的朋友还想知道的：

（537）个朋友认为回复得到帮助。

部分文章信息来源于以及网友投稿，转载请说明出处。

本文标题：css怎么让盒子水平居中方法（div盒子垂直居中）：http://sjzlt.cn/shuma/155314.html

上一篇：cad图纸绘图单位英寸怎么改（cad英寸图纸怎么转换毫米）

下一篇：elasticsearch实现全文搜索（比elasticsearch更好的搜索引擎）