zoukankan      html  css  js  c++  java
  • CSS:div/img水平垂直居中

    div水平垂直居中方法一:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#test{
    				position: absolute;
    				 100px;
    				height: 100px;
    				background: pink;
    				left: 0;
    				right: 0;
    				bottom: 0;
    				top: 0;
    				margin: auto;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="test"></div>
    	</body>
    </html>
    

     div水平垂直居中方法二:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#test{
    				position: absolute;
    				 100px;
    				height: 100px;
    				background: pink;
    				left: 50%;
    				top: 50%;
    				/*margin-left和margin-top的值为宽度和高度的一半*/
    				margin-left: -50px;
    				margin-top: -50px;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="test"></div>
    	</body>
    </html>
    

     div水平垂直居中方法三:

            未知div的宽高垂直水平居中

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			#test{
    				background: pink;
    				position: absolute;
    				left: 50%;
    				top: 50%;
    				transform: translate(-50%,-50%);
    			}
    		</style>
    	</head>
    	<body>
    		<div id="test">
    			未知div的宽高垂直水平居中
    		</div>
    	</body>
    </html> 

    img水平垂直居中方法:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			html,body{
    				height: 100%;
    			}
    			body{
    				text-align: center;
    			}
    			body:after{
    				content: "";
    				display: inline-block;
    				height: 100%;
    				vertical-align:middle;
    			}
    			img{
    				vertical-align: middle;
    			}
    		</style>
    	</head>
    	<body>
    		<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1537119514734&di=5f0585bf2c64ae73b202f2cf98751cd5&imgtype=0&src=http%3A%2F%2Ftgi13.jia.com%2F116%2F258%2F16258758.jpg"/>
    	</body>
    </html>
    
  • 相关阅读:
    检查c# 内存泄漏
    条件请求与区间请求
    python排序算法
    webpack+react+redux+es6
    Wireshark命令行工具tshark
    Web的形式发布静态文件
    PyQT制作视频播放器
    DotNet二维码操作组件ThoughtWorks.QRCode
    给你讲个笑话,我是创业公司CEO
    分库分表总结
  • 原文地址:https://www.cnblogs.com/xinzaimengzai/p/9657965.html
Copyright © 2011-2022 走看看