水平垂直置中(position)

使用position與transform達到文字或區塊絕對垂直水平置中

區塊位置水平垂直置中

作法:

  1. 將物件以絕對定位的方式放在top:50%;left:50%的位置,可想而知這樣物件座標居中,但整體會偏右偏下。
  2. 用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%);
}

 

來源:




 迴響列表

關於我

在這個年代,個人網站的存在是非常難能可貴的。何況還是自己寫的,簡直就是人間的塊寶,世界的遺產。

Read More
艾吉碎碎唸

用wordpress架網站超級沒有成就感...

最新PO文
Go to Blog
Social Accounts