文字在div内水平垂直居中

最新推荐文章于 2023-03-18 13:37:05 发布

转载最新推荐文章于 2023-03-18 13:37:05 发布 · 98 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2870138/blog/782520

文章标签：

#python

2019独角兽企业重金招聘Python工程师标准>>>

在开发中，很多时候都需要将文字在div内水平垂直居中，最常见的如登录按钮。下面仅记录我的方法，我的工作领域是移动Web开发，所以基本上ie浏览器不考虑。望见谅。

<!DOCTYPE HTML>
<html>
<head>
<title>水平垂直居中</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
  <style type="text/css">
	div{
		width:200px;height:200px;  /*设置div的大小*/
		border:1px solid green;    /*边框*/
		text-align: center;        /*文字水平居中对齐*/
		line-height: 200px;        /*设置文字行距等于div的高度*/
		overflow:hidden;
	}
  </style>
</head>
<body>
<div>水平垂直居中</div>
</body>
</html>

亲测Chrome有效。

我本菜鸟，人生第一篇博客，有啥不对或者需要补充的地方还望各路大神指点。。

(●'◡'●)

转载于:https://my.oschina.net/u/2870138/blog/782520