美文网首页
html css居中

html css居中

作者: _TSRed | 来源:发表于2018-07-04 13:33 被阅读0次
    1.垂直居中(方法一)
    .wrap h2 {
      margin:0;
      height:100px;
      line-height:100px;
      background:#ccc;
    }
    
    <div class="wrap">
            <h2>Hello world</h2>
    </div>
    

    总结: line-height 设置垂直居中
    行高,指代文本中,行与行之间的基线间的距离。
    Line-height行高属性,运用到对文字排版,实现上下排文字间隔距离,以及单排文字在一定高度情况上下垂直居中布局。

    2.垂直居中(方法二)
    #parent {
      display: flex;
      align-items: center;
      /justify-content: center;/
      /水平居中/
      width: 200px;
      height: 200px;
      background: yellow;
     }
    <div id="parent">
      这是一个盒子垂直居中
    </div>
    

    总结:弹性盒的
    justify-content:center;//元素在横轴的对齐方式
    align-items:center;//元素在纵轴的对齐方式

    3.vertical-align 设置图片垂直居中(行内元素 方法三)
    *{margin:0;padding:0;}
    .parent{
      margin-left: 100px;
      margin-top: 100px;
      width: 600px;
      height: 400px;
      border: 1px solid #ddd;
      border-radius: 15px;
      background-color: #fff;
      box-shadow: 0 3px 18px rgba(0,0,0,.5);
      text-align: center;
    }
    .child{
      width: 0;
      line-height: 400px;
    }
    img{
      vertical-align: middle;
    }
    
    <div class="parent">
      <img src="a21.png" alt="">
      <span class="child"></span>
    </div>
    

    总结:vertical-align 属性设置元素的垂直对齐方式。

    4.定位的居中方法(1)
    .father{
      width: 200px;
      height: 200px;
      background: pink;
      position: relative;
    }
    .son{
      width: 100px;
      height: 100px;
      background: yellowgreen;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }
    <div class="father">
      <div class="son"></div>
    </div>
    

    总结:首先我们要了解样式中的这两种定位;

    absolute(绝对定位):将被赋予的对象从文档流中拖出,使用left,right,top,bottom等属性相对于最接近的一个最有定位设置的父级对象进行绝对定位,如果父级没有进行定位属性设置,则按照默认规则来设定(根据body左上角作为参考进行定位),同时绝对定位的对象可层叠。

    relative(相对定位):对象不可重叠,使用left,right,top,bottom等属性在正常的文档流中进行定位,其对象不可以层叠。

    5.水平居中行内元素居中(1)
    .div1{
      text-align:center;
    }
    <div class="div1">Hello world</div>
    
    6.水平居中相对定位(2)
    .wrap{
      float:left;
      position:relative;
      left:50%;
      clear:both;
    }
    .wrap-center{
      background:#ccc;
      position:relative;
      left:-50%;
    }
    
    <div class="wrap">
      <div class="wrap-center">Hello world</div>
    </div>
    

    总结: 通过给父元素设置 float,然后给父元素设置 position:relative 和 left:50%,
    子元素设置 position:relative 和 left: -50% 来实现水平居中。

    7.图片水平居中
    .tu img{
      display: block;
      margin:0 auto;
    }
    
    <div class="tu">
      <img src="img/one.jpg" >
    </div>
    
    8.table布局居中方法(1)
    .father{
      width: 200px;
      height: 200px;
      background: pink;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
    .son{
      display: inline-block;
      width: 100px;
      height: 100px;
      background: yellowgreen;
    }
    
    <div class="father">
        <div class="son"></div>
    </div>
    
    9.div绝对定位水平垂直居中【margin 负间距】
    div{
      width:200px;
      height: 200px;
      background:green;
      position: absolute;
      left:50%;
      top:50%;
      margin-left:-100px;
      margin-top:-100px;
    }
    
    10.margin居中
    <div class="parent">
      <div class="child">
        111
      </div>
    </div>
    
    .parent{
      height: 140px;
      background: red;
      display: grid;
    }
    .child{
       margin: auto;
    }
    

    用法:grid 给他父级元素
    margin: auto 给他的子元素

    11.绝对定位+margin垂直居中
    .div{
      width: 200px;
      height: 200px;
      background: pink;
      margin: auto;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      top: 0;
    }
    <div class="div"></div>

    相关文章

      网友评论

          本文标题:html css居中

          本文链接:https://www.haomeiwen.com/subject/hgceuftx.html