zoukankan      html  css  js  c++  java
  • web网页中各种margin布局居中效果 水平居中 垂直居中 水平垂直居中

    页面中元素居中效果分为三种情况,1.水平居中,2.垂直居中,3.水平垂直居中

    下面代码视图层统一代码结构:

    <div class="father">
    	<div class="son"></div>
    </div>

    1.水平居中:

    应用场景:整体网站居中,文字排版居中

    css代码:

    .father{
    	 100%;
    }
    .son{
    	800px;
    	height: 60px;
    	background: #ccc;
    	margin: auto;
    }

    2.垂直居中:

    css代码:

    .father{
    	 100%;
    	height:300px;
    	writing-mode: vertical-lr;
    	background: orange;
    }
    .son{
    	80%;
    	height: 100px;
    	background: #f2f2f2;
    	margin: auto;
    }

    3.水平居中:

    .father{
    	position:absolute;
    	top: 0;left: 0;bottom: 0;right: 0;
    	background: rgba(0,0,0,.5);
    }
    .son{
    	position: absolute;
    	top: 0;left: 0;bottom: 0;right: 0;
    	300px;
    	height: 300px;
    	background: #f2f2f2;
    	margin: auto;
    }

  • 相关阅读:
    IfcAxis2Placement3D
    IfcAxis2Placement2D
    IfcAxis1Placement
    realsense 深度数据
    realsense 深度数据
    realsense 深度数据
    sudo fdisk -l
    temviewer历史版本
    100/9801
    IfcPlacement
  • 原文地址:https://www.cnblogs.com/zj1024/p/8831144.html
Copyright © 2011-2022 走看看