zoukankan      html  css  js  c++  java
  • 水平垂直居中的四种方法

    居中面试的方法

    一、带宽高的类型

    <style>
    			.father{
    				 500px;
    				height: 500px;
    				background-color: blue;
    				position: relative;
    			}
    			.son{
    				position: absolute;
    				 200px;
    				height: 200px;
    				background-color: red;
    			top: 50%;
    			left: 50%;
    
    	margin-top: -100px;
    	margin-left: -100px;
    			border: 5px solid black;
    			}
    		</style>
    			<body>
    		<div class="father">
    			<div class="son"></div>
    		</div>
    	</body>
    
    		<style>
    			.father{
    				 500px;
    				height: 500px;
    				background-color: blue;
    				position: relative;
    			}
    			.son{
    				position: absolute;
    				 200px;
    				height: 200px;
    				background-color: red;
    				border: 5px solid black;
                                    top: 0;
    				left: 0;
    				right: 0;
    				bottom: 0;
    				margin: auto;
    			}
    		</style>
    		
    			<body>
    		<div class="father">
    			<div class="son"></div>
    		</div>
    	</body>
    

    二、不带宽高

    		<style>
    			.father{
    				 500px;
    				height: 500px;
    				background-color: blue;
    				position: relative;
    			}
    			.son{
    				position: absolute;
    				background-color: red;
    				left: 50%;
    				top: 50%;
    				transform: translate(-50%,-50%);
    			
    			}
    		</style>
    			<body>
    		<div class="father">
    			<div class="son">box</div>
    		</div>
    	</body>
    
    	<style>
    		.father{
    			 500px;
    			height: 500px;
    			background-color: blue;
    			display: flex;
    justify-content: center;	
    			align-items: center;
    		}
    		.son{
    			background-color: red;
    		}
    	</style>
    </head>
    <body>
    	<div class="father">
    		<div class="son">box111</div>
    	</div>
    </body>
  • 相关阅读:
    对数可以用来简化乘法计算
    理解了一点github的用法了
    由摄氏温度和华氏温度转换想到的。
    CMD原来是支持通配符的啊
    怎么在CMD中创建文件
    如何学习数学
    SCILAB
    STS或eclipse安装SVN插件
    Html解析类的新选择CsQuery
    Tomcat编码问题
  • 原文地址:https://www.cnblogs.com/AFBF/p/14604201.html
Copyright © 2011-2022 走看看