zoukankan      html  css  js  c++  java
  • css+div水平居中

    实现div内容水平居中

    实现方案一:margin:0 auto;

    div{
         height:100px;
         100px;
         background:red;
         margin:0 auto;
      }
    

      

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>div水平居中</title>
    	</head>
    	<body>
    		<div></div>
    	</body>
    </html>
    

      

    实现div水平居中方案二:position:absolute;绝对定位

    div{
        height:100px;
        width:100px;
        background:red;
        position:absolute;
       left:50%;
       right:50%;
       margin: auto;
    } 

    实现div水平垂直居中

    实现方案一:position:fixed;固定定位

    div{
                    height:100px;
                    width:100px;
                    background:red;
                    position:fixed;
                    left:0;
                    top:0;
                    bottom:0;
                    right:0;
                    margin:auto;
                }

    实现方案二:position:absolute;绝对定位

    div{
                    height:100px;
                    width:100px;
                    background:red;
                    position:absolute;
                    left:0;
                    top:0;
                    bottom:0;
                    right:0;
                    margin:auto;
                }

    实现方案二:css3+position;

    div{
                    height:100px;
                    width:100px;
                    background:red;
                    position:absolute;
                    left:50%;
                    top:50%;
                    transform:translate(-50%,-50%);
                }

    transform为css3的新增属性,因此需要加上前缀,兼容手机和其他的浏览器。如

    -ms-transform:translate(-50%,-50%); /* IE 9 */
    -moz-transform:translate(-50%,-50%); /* Firefox */
    -webkit-transform:translate(-50%,-50%);/* Safari and Chrome */
    -o-transform:translate(-50%,-50%); /* Opera */
  • 相关阅读:
    python计算机基础
    计算机基础知识
    ftok函数
    可重入函数与不可重入函数
    Redis学习资料整理
    小记6月18
    libxml2简单的生成、解析操作
    切换日志是否更新检查点?
    第五课 数据备份恢复实验
    第四课 Grid Control实验 GC Agent安装(第一台机器部署) 及卸载
  • 原文地址:https://www.cnblogs.com/jaume/p/6978631.html
Copyright © 2011-2022 走看看