CSS垂直居中

時間 2019-12-10

標籤 css 垂直居中欄目 CSS 简体版

原文原文鏈接

一、基於絕對定位的解決方案html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*垂直居中*/
        /*絕對定位方案*/
        .container {
            background: #003d94;
	    position: relative;
            width: 100%;
            height:  300px;
	}

	.block {
	    background: #6b0;
	    max-width: 20%;
	    padding: 20px 30px;
	    position: absolute;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="block">
            <h3>Am I centered yet?</h3>
            <p>center me please!</p>
        </div>
    </div>
</body>
</html>

二、基於視口的解決方案flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container2 {
            background: #87ceeb;
            width: 100%;
            height: 300px;
            margin-top: -367px;
        }

        .block2 {
            background: #ff4500;
            max-width: 20%;
            padding: 20px 80px;
            margin: 50vh auto 0;
            transform: translateY(50%);
        }
    </style>
</head>
<body>
    <div class="container2">
        <div class="block2">
            <h3>Am I centered yet?</h3>
            <p>center me please!</p>
        </div>
    </div>
</body>
</html>

三、基於flexbox的解決方案ui

請注意，當咱們使用flexbox時，margin:auto不僅是在水平方向上居中，垂直方向上也是如此。flexbox

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        /*基於flexbox的解決方案*/
        .container3 {
            background: #bfdef3;
            width: 100%;
            height: 300px;
            display: flex;
        }

        .block3 {
            background: #ff4500;
            max-width: 20%;
            padding: 20px 80px;
            margin: auto;            
        }
    </style>
</head>
<body>
    <div class="container3">
        <div class="block3">
            <h3>Am I centered yet?</h3>
            <p>center me please!</p>
        </div>
    </div>
</body>
</html>

1. css垂直居中
2. CSS 垂直居中
3. # css垂直居中
4. CSS垂直居中
5. css 垂直居中
6. css水平居中垂直居中水平垂直居中
7. CSS水平居中+垂直居中+水平垂直居中
8. CSS-水平居中、垂直居中、水平垂直居中
9. css的垂直居中
10. css圖片垂直居中
更多相關文章...
• PHP imagecharup - 垂直地畫一個字符 - PHP參考手冊
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• Scala 中文亂碼解決
• C# 中 foreach 遍歷的用法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。