首页 > 其他分享 >css让层水平垂直居中

css让层水平垂直居中

时间:2022-10-26 00:14:16浏览次数:59  
标签:居中 translateX translateY 50% 垂直 css

    .myDiv{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%)
    }

在父窗体上声明

<div style={{height:'100px',width:"100px",backgroundColor:"ActiveBorder",position:"relative",display:"flex",alignItems:"center",justifyContent:"center"}}>

 

标签:居中,translateX,translateY,50%,垂直,css
From: https://www.cnblogs.com/sexintercourse/p/16826875.html

相关文章

  • 【HTML&CSS】唉,我以为行内元素都不能设置宽高
    又是面试驱动学习的一天常见的行内元素有哪些?abr img input label object span select textarea行内的置换元素是可以设置宽高的,置换元素有哪些呢?让我们来......
  • 等腰直角三角形ABC中,角A=90,AB=AC,J为BC中点,BD=CE,作AG垂直BE交BC于F,作FH垂直CD交BE于P。
    2022年10月25日22点53分END......
  • 零基础CSS从入门到精通
    资源简介这一套经典的CSS视频教程,带你从入门到深入学习web前端课程。下载地址:https://pan.baidu.com/s/1jDV__YNpg1v_3FFkH6l5Ng提取码:z94n......
  • 好看的CSS效果
    好看的效果1.复选框:思路是使用复选框并进行隐藏,然后自己写一个div,并且用:before来放进div复选框这,不少地方采用绝对定位,在:checked时更改对应颜色。<divclass=......
  • CSS
    CSS简介CSS是一门语言,用于控制网页表现CSS:层叠样式表W3C CSS导入方式CSS导入HTML有三种方式内联样式:在标签内部使用style属性,属性值是css属性键值对<divstyle=......
  • vite+ts+scss 设置多个scss公共样式不起作用
    preprocessorOptions:{scss:{additionalData:`@use"./src/assets/scss/style.scss"as*;@use"./src/assets/scss/index.scss"as*;@use"./src/assets/scss/......
  • css命名
    BEM是一种CSS命名规范。BEM代表“块(block),元素(element),修饰符(modifier)”。好处:摆脱特异性的困扰修复继承问题停止担心命名在选择器中,由以下三种符号来表示扩展的关系:......
  • vite+vue3使用tailwindcss
    vite+vue3使用1.通过npm安装Tailwindnpminstall-Dtailwindcss@latestpostcss@latestautoprefixer@latest2.创建您的配置文件npxtailwindcssinit这将会在......
  • css-垂直居中
    前言水平居中可以简单使用以下两种方式:margin:0auto;text-align:center;故重点讨论垂直居中1.(一行文字)设置行高等于父元素高度line-height:200px;//设置行高等于......
  • CSS盒子模型与定位
    盒子模型与定位元素简单分三大类:块级元素,内联元素(行级),内联块级元素块级元素:元素宽度在不设置的情况下,是它本身父容器的100%常见的块级元素有:<div>,<p>,<h1>~<......