首页 > 代码库 > CSS垂直居中

CSS垂直居中

2024-09-10 03:02:28   218人阅读

1、基于绝对定位的解决方案

<!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>

2、基于视口的解决方案

<!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>

3、基于flexbox的解决方案

请注意，当我们使用flexbox时，margin:auto不只是在水平方向上居中，垂直方向上也是如此。

<!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>

　　

CSS垂直居中


联系
我们