zoukankan      html  css  js  c++  java
  • css水平垂直居中问题

    水平居中:

    • 行内元素:text-align:center;
    • 块级元素:magin:0 auto;
    • 子元素设置:position:absolute;  left:50%;  transform:translateX(-50%);
    • 父元素设置:display:flex;  justify-content:center;

    垂直居中:

    • line-height:height;
    • 子元素设置:position:absolute;  top:50%;  transform:translateY(-50%);
    • 父元素设置:display:flex; align-items:center;

    水平垂直居中:

    • display:flex; justify-content:center; align-items:center;
    • .parent{position:relative; }   .children{position:absolute; 200px; height:100px; top:50%; left:50%; margin-left:-100px; margin-top:-50px;}
    • .parent{position:relative;}     .children{position:absolute; 200px; height:100px; top:50%; left:50%; transform:translate(-50%,-50%)}
    • .parent{position:relative;}  .children{position:absolute; top:0; bottom:0; left:0; right:0;   margin:auto;}
  • 相关阅读:
    015_stdc_C语言
    014_stdc_C语言
    013_stdc_C语言
    012C语言
    011_stdc_C语言
    010_stdc_C语言
    009_stdc_C语言
    008_stdc_C语言
    40.委托
    39.多线程
  • 原文地址:https://www.cnblogs.com/xingxyx/p/11669551.html
Copyright © 2011-2022 走看看