水平垂直置中(flex)

使用align-items與justify-content達到文字或區塊垂直水平置中

使用align-items、flex、justify-content 來達到水平垂直居中的效果

重點:

  1. align-items:center;
  2. display:flex;
  3. justify-content:center
  4. height:100vh; 

效果演示:

 

HTML:

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>物件水平垂直置中</title>
    <link rel="stylesheet" href="style.css">
</head>

<body id="dailycss_20200803-3">
    <h1>艾吉是我</h1>
</body>

</html>

 

CSS:

#dailycss_20200803-3 {
    padding: 0;
    margin: 0;
    height: 100vh;
    align-items: center;
    display: flex;
    justify-content: center;
    background-color: #292929;
}

#dailycss_20200803-3 h1 {
    font-size: 6em;
    color: #ffd200;
    text-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
}



 迴響列表

關於我

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

Read More
艾吉碎碎唸

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

最新PO文
Go to Blog
Social Accounts