zoukankan      html  css  js  c++  java
  • div居中方法

    <div id = "parent">
    
      <div style="height:40px;40px;border:1px solid red" id="center-div">陈小鹏笔记</div>  
    
    <div>
    

      

    1、如果是知道具体宽度,使用margin-left:600px或者padding-left:600px这种方法可以用,但会随着分辨率大小或者是响应式屏幕里会出现严重的问题,不适宜这样写。

    2、将div如同文字一样显示居中的方法

    1 <style>
    2 #partent{
    3     text-align:center;
    4 }
    5 #center-div{
    6 display:inline-block;
    7 }
    8 </style>

    常见的方法:

    1 #center-div{
    2     margin:0 auto;
    3 }

    我开发常用的,让其居中的方法:

     1 <style>
     2 #parent{
     3      position:relative
     4 }
     5 #center-div{
     6      position:absolute;
     7      left:50%;
     8      top:50%;
     9      margin-left:-20px;
    10      margin-top:-20px;
    11 }
    12 </style>

    后来发现,这种绝对定位的方式虽好,但是并没有下面的方式好

    1  <style>
    2 #center-div{
    3      position:absolute;
    4      left:50%;
    5      top:50%;
    6     -webkit-transform: translate(-50%,-50%);
    7      transform: translate(-50%,-50%);
    8 }
    9 </style>

    因为自始至终我无需知道div具体的宽度是多少  by Demo117

  • 相关阅读:
    类加载机制与jdk智能调优命令
    初认Redis
    Spring-Cloud组件eureka
    SpringBoot入门知识
    SpringCloud
    java内存模型
    Redis
    Vue
    Nginx
    Linux系统
  • 原文地址:https://www.cnblogs.com/viper-Demo/p/6004945.html
Copyright © 2011-2022 走看看