水平垂直置中(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%);
}

 

來源:




 迴響列表

目前還沒有任何留言


 留言表單

如果想要使用回覆功能,或是刪除修改自己的留言,可以登入網站後再來留言。

🧨 Method Illuminate\View\View::__toString() must not throw an exception, caught ParseError: syntax error, unexpected 'array' (T_ARRAY), expecting function (T_FUNCTION) or const (T_CONST)