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

    1,(元素在容器中垂直水平居中)
    css: .box{800px;height:800px;background:#ccc;display:flex;justify-content:center;align-items:center;}
                   .box div{300px;height:300px;background:red;}
    html:  <div class="box">
                   <div></div> 
              </div>
     
     
    2,(元素在容器中垂直水平居中)
    css: .box{800px;height:800px;background:#ccc;display:flex;justify-content:center;}
                   .box div{300px;height:300px;background:red;align-self:center;}
    html:  <div class="box">
                    <div></div> 
              </div>
     
     
    3,(元素在页面垂直水平居中)
    css:   .box{800px;height:800px;background:red;position:fixed;left:0;right:0;top:0;bottom:0;margin:auto;}
    html:  <div class="box"></div>
     
     
    4,(元素在容器中垂直水平居中)
    css:    .box{800px;height:800px;text-align:center;}
              .box .box2{display:inline-block;vertical-align:middle;}
              .box span{display:inline-block;0px;height:100%;vertical-align:middle;}
    html:   <div class="box">
                       <a class="box2">垂直水平居中</a><span></span>                    
               </div>
               <!--要在元素后面不换行加空的span-->
    不问前程凶吉,但求落幕无悔
  • 相关阅读:
    Java EE
    C++基础学习(二)之判断
    C++基础学习(一)之循环
    AutoCAD完全卸载
    point-cloud-annotation-tool编译发烧记_UBUNTU
    Ubuntu18.04安装QT5
    Ubuntu安装VTK-8.1
    常用Latex公式代码表[持续更新]
    shp矢量文件批处理裁剪栅格影像_IDL/ENVI
    摄影测量基本原理
  • 原文地址:https://www.cnblogs.com/qiao915/p/6627982.html
Copyright © 2011-2022 走看看