文字在div内水平垂直居中

时间 2020-02-06

标签文字 div 水平垂直居中栏目 CSS 繁體版

原文原文链接

在开发中，不少时候都须要将文字在div内水平垂直居中，最多见的如登陆按钮。下面仅记录个人方法，个人工做领域是移动Web开发，因此基本上ie浏览器不考虑。望见谅。css

<!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有效。html

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

(●'◡'●)ui