欢迎光临
我们一直在努力

div垂直居中、弹窗居中、左右居中

弹窗如何居中?div如何垂直居中?今天我整理一个demo代码给大家演示一下,方法有很多,但我就最喜欢这一种

div如何垂直居中

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <link rel="dns-prefetch" href="//apps.bdimg.com">
    <meta http-equiv="X-UA-Compatible" content="IE=11,IE=10,IE=9,IE=8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-title" content="自游互动">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <title>div居中,垂直居中</title>
    <meta name="keywords" content="div垂直居中,div左右居中">
    <meta name="description" content="div垂直居中,div左右居中,div怎么垂直居中,div怎么左右居中">
    <style type="text/css">
        .dialog_layout {
            width:400px;
            height:400px;
            background-color:red;
	        text-align: center;
	        overflow: hidden;
	        outline: 0;
	        -webkit-overflow-scrolling: touch;
	        z-index: 998;
        }

        .dialog_layout:after {
	        content: '';
	        display: inline-block;
	        height: 100%;
	        vertical-align: middle;
        }

        .dl_win {
	        width: 80%;
	        max-width: 200px;
	        height: 200px;
	        display: inline-block;
	        vertical-align: middle;
	        text-align: left;
	        position: relative;
	        background-color: #fff;
	        border-radius: 10px;
	        box-shadow: 0 0 10px #505D66;
	        margin: 10px 0 10px 0;
        }
    </style>
</head>

<body>
    <div class="dialog_layout">
        <div class="dl_win">
            1<br />
            2<br />
            3<br />
            4<br />
            5<br />
            6<br />
            7<br />
            8<br />
        </div>
    </div>
</body>
</html>

 

弹窗如何垂直居中

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <link rel="dns-prefetch" href="//apps.bdimg.com">
    <meta http-equiv="X-UA-Compatible" content="IE=11,IE=10,IE=9,IE=8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-title" content="自游互动">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <title>弹窗居中显示(左右居中,垂直居中)</title>
    <meta name="keywords" content="div垂直居中,div左右居中,弹窗居中,弹窗div垂直居中">
    <meta name="description" content="div垂直居中,div左右居中,弹窗居中,弹窗div垂直居中">
    <style type="text/css">
        .dialog_layout {
	        position: fixed;
	        top: 0;
	        left: 0;
	        bottom: 0;
	        right: 0;
	        text-align: center;
	        overflow: hidden;
	        outline: 0;
	        -webkit-overflow-scrolling: touch;
	        background-color: rgb(0,0,0);
	        filter: alpha(opacity=60);
	        background-color: rgba(0,0,0,0.2);
	        z-index: 998;
        }

        .dialog_layout:after {
	        content: '';
	        display: inline-block;
	        height: 100%;
	        vertical-align: middle;
        }

        .dl_win {
	        width: 80%;
	        max-width: 800px;
	        height: 500px;
	        display: inline-block;
	        vertical-align: middle;
	        text-align: left;
	        position: relative;
	        background-color: #fff;
	        border-radius: 10px;
	        box-shadow: 0 0 10px #505D66;
	        margin: 10px 0 10px 0;
        }
    </style>
</head>

<body>
    <div class="dialog_layout">
        <div class="dl_win">
            1<br />
            2<br />
            3<br />
            4<br />
            5<br />
            6<br />
            7<br />
            8<br />
            9<br />
            10<br />
        </div>
    </div>
</body>
</html>

 

赞(2)
未经允许不得转载:自游互动 » div垂直居中、弹窗居中、左右居中
分享到: 更多 (0)

自由技术,自由自在

项目合作联系我们