使用position與transform達到文字或區塊絕對垂直水平置中
區塊位置水平垂直置中
作法：
- 將物件以絕對定位的方式放在top:50%;left:50%的位置，可想而知這樣物件座標居中，但整體會偏右偏下。
- 用transform屬性，再將物件的水平垂直各拉50%回來﹙translateX(-50%) translateY(-50%)﹚即可。
效果演示：
HTML：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>物件水平垂直置中</title>
<link rel="stylesheet" href="style.css">
</head>
<body id="dailycss_20200803">
<h1>文字置中</h1>
</body>
</html>
CSS：
#dailycss_20200803 {
padding: 0;
margin: 0;
background-color: #ffd200;
}
#dailycss_20200803 h1 {
font-size: 6em;
margin: 0;
padding: 20px 40px;
text-align: center;
color: #221814;
background-color: #fff;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
來源：
迴響列表
目前還沒有任何留言
留言表單