zoukankan      html  css  js  c++  java
  • 前端随心记---------面试题

    1.在父元素中水平垂直居中
     
    <div class="box">
    <div class="inner">
    </div>
    </div>
     
    .box{
    display: flex;
    justify-content: center;/* 水平居中 */
    align-items: center;/* 垂直居中 */
     500px;
    height: 500px;
    border: 1px solid red;
    }
    .inner{
     200px;
    height: 200px;
    background-color: red;
    }
     
    2.始终在屏幕水平垂直居中
     
    .box{
     100px;
    height: 100px;
    background:red;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    }
     
    3.始终在屏幕水平垂直居中
     
    .box{
    200px;
    height: 200px;
    background:red;
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-100px;
    margin-top:-100px;
    } 
     
     
     
     
     
    4.始终在屏幕水平垂直居中
     
    .box{
     600px;
    height: 600px;
    background: red;
    position:absolute;
    left:0;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    }
     
    5.实现文字水平居中
     
    .box {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
     240px;
    height: 180px;
    border:1px solid #666;
    } 

    垂直居中的五种方案

    集思广益,仅供学习,侵权即删!!
  • 相关阅读:
    hive默认配置 .hiverc
    hive 行列转换
    hive 全表全字段对比
    shell 获取hive表结构
    粘包现象与解决方案
    win 关闭正在使用的端口
    pycharm格式报错: Remove redundant parentheses
    博客系统作业
    django中间件
    django的用户认证组件
  • 原文地址:https://www.cnblogs.com/hudunyu/p/11772962.html
Copyright © 2011-2022 走看看