使用align-items與justify-content達到文字或區塊垂直水平置中-我是一個金艾吉

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

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

重點：

align-items:center;
display:flex;
justify-content:center
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);
}

分享這篇PO文

迴響列表

目前還沒有任何留言

留言表單