zoukankan      html  css  js  c++  java
  • css实现居中的五中方法

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>css实现的五种居中的方法</title>
    	<style>
    		.inner {
    			height: 300px;
    			 1200px;
    			position: absolute;//
    			top: 50%;//
    			left: 50%;//
    			transform: translate(-50%,-50%);//
    			background-color: #888;
    			text-align: center;
    			line-height: 300px;
    		}
    		#wrapper {
    			display: table;
    		}
    		#cell {
    			display: table-cell;
    			vertical-align: middle;
    		}
    	</style>
    </head>
    <body>
    <!-- 参考网址:https://www.qianduan.net/css-to-achieve-the-vertical-center-of-the-five-kinds-of-methods/
    1:.inner{
    position : absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%, -50%);
    }
    
    2:
    #wrapper {
        display: table;
    }
    
    #cell {
        display: table-cell;
        vertical-align: middle;
    }
    3:
    这个方法使用绝对定位的 div,把它的 top 设置为 50%,top margin 设置为负的 content 高度。这意味着对象必须在 CSS 中指定固定的高度。
    
    因为有固定高度,或许你想给 content 指定 overflow:auto,这样如果 content 太多的话,就会出现滚动条,以免content 溢出。
    #content {
        position: absolute;
        top: 50%;
        height: 240px;
        margin-top: -120px; /* negative half of the height */
    }
    4:
    这个方法使用了一个 position:absolute,有固定宽度和高度的 div。这个 div 被设置为 top:0; bottom:0;。但是因为它有固定高度,其实并不能和上下都间距为 0,因此 margin:auto; 会使它居中。使用 margin:auto;使块级元素垂直居中是很简单的。
    #content {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        height: 240px;
         70%;
    }
    5:
    这个方法只能将单行文本置中。只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了。
    #content {
        height: 100px;
        line-height: 100px;
    }
    6:这种方法,在 content 元素外插入一个 div。设置此 div height:50%; margin-bottom:-contentheight;。 
    content 清除浮动,并显示在中间。
    
    #floater {
        float: left;
        height: 50%;
        margin-bottom: -120px;
    }
    
    #content {
        clear: both;
        height: 240px;
        position: relative;
    }
     -->
    	<!-- <div class="inner">方法一</div> -->
    	<div id="wrapper"></div>
    	<div id="cell"></div>
    </body>
    </html>
    

      

  • 相关阅读:
    SQL查询语句中,any和all有什么区别?
    $(function(){...});
    在ASP.NET中TextBox和TextBoxFor的区别以及ValidationMessageFor的作用以及EditorFor等的作用和用法什么?
    Brt课程设计day3
    Brt课程设计day2
    day1
    .net 高级写法总结
    可能是目前最完整的前端框架 Vue.js 全面介绍
    redis live 如何安装
    百万级PHP网站架构工具箱
  • 原文地址:https://www.cnblogs.com/handsomehan/p/5380617.html
Copyright © 2011-2022 走看看