文字在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

相關標籤/搜索