css（五）---css中的一些问题_比父高居中 css-CSDN博客

本文链接：https://blog.csdn.net/Shine_twinkle/article/details/78840391

不定宽高水平和垂直居中
如给元素一个宽高进行水平垂直居中，这个自然是很简单的。方法也有很多种，那么今天就复习一下不定宽高的。当然本质也是差不多的。
在说居中之前，首先讲一下文字的水平垂直居中：

        height: 300px;
        width: 300px;
        border: 1px solid black;
        color: rgb(216, 50, 38);
        text-align: center;
        line-height: 300px;

这个居中主要是利用 text-align: center;和 line-height: height;这两个属性进行居中的。
接下来，进入主题吧：

给父级设一个flex盒子
- 这是利用css3中的弹性盒子的一些属性，主要是利用flex属性。给父级一个宽高，而子级则没有给宽高，让子级进行水平垂直居中的。

  .wrapper{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            display: flex;
            align-items: center;//子元素水平居中
            justify-content: center;//子元素垂直居中
        }
         <div class="wrapper">
                <div>不定宽高居中</div>
         </div>

通过 align-items: center;和 justify-content: center;属性，将子元素进行水平垂直居中，这种方式在移动布局页面的时候经常的使用。是现在比较火得页面布局方式，讲到css3时，再详细的介绍吧。

利用table-cell的方法
- display:table-cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说sorry了，这一事实也是大大制约了display:table-cell属性在实际项目中的应用，我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以display:table-cell还是有不少潜在的使用价值的，虽说IE6/7不支持此属性，但是幸运的是，IE6/7一些乱糟糟的属性与渲染，我们可以其他方法实现同样或是类似的效果。
  大家可以好好研究一下IE6/7，因为这个浏览器当时是比较牛的一款，基本上霸占了整个市场，它也不顾及兼不兼容的问题，我是老大都得听我的。但随着谷歌公司推崇的Google浏览器，IE再也不能像以前任性了，才开始注重兼容性的问题。导致以前的浏览器有一些问题，具体可以自己去研究一下。

   <style>
  .wrapper{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            display: table-cell;
            text-align: center;//水平居中
            vertical-align: middle;//垂直状态是什么样的形式，里面的属性值还有top、bottom。
        }
        .wrapper div{
            vertical-align: middle;
            display: inline-block;
        }

    </style>

    <div class="wrapper">
        <div>不定宽高居中</div>
    </div>

最终显示效果和之前的差不多，都是让其子元素相对与父元素水平垂直居中的。

利用css3的transform属性
- 因为子元素没有宽高，所以不能根据margin进行缩进的。因此就引入了transform属性，对没有宽高的元素进行水平垂直居中。
- 这是css3动画中的一个属性，为了改变元素的相对值，里面有相应的属性值，分别是translateX()、translateY()、translateZ()。最后一个是3d效果的，在z方向上进行运动。

 <style>
 .wrapper{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            position: relative;
        }
        .wrapper div{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);//第一个参数是X,第二个参数是Y的值。

        }
        </style>
         <div class="wrapper">
                <div>不定宽高居中</div>
          </div>

这种方式也能实现水平垂直居中的的要求。虽然实现这种方式的方法有很多的，但是第一种用的比较多，也是现在最流行的方式。
三栏布局
布局是制作页面最基础的思想，那么我所熟知的左中右三栏宽度自适应于浏览器的方法有三个：绝对定位法，margin负值法以及自身浮动法。这些方法简洁实用，且无兼容性问题。

绝对定位法

这或许是三种方法里最直观，最容易理解的：左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。

    <style>
     width: 100%;
          height: 200px;
          position: relative;
      }
      .left,.right{
          width: 200px;
          height: 200px;
          position: absolute;
          top: 0;
      }
      .left{
          left: 0;
          background: red;
      }
      .right{
          right: 0;
          background: yellow;
      }
      .main{
          margin: 0 200px;
          height: 200px;
          background: green;
      }
    </style>
    <div class="wrapper">
        <div class="left">1</div>
        <div class="main">2</div>
        <div class="right">3</div>
    </div>

结果如下：

这里写图片描述

margin负值法
- 这种方法是在实际的网站中应用的最多的，首先，中间的主体要使用双层标签。左栏与右栏都是采用margin负值定位的，左栏左浮动，margin-left为-100%，由于前面的div宽度100%与浏览器，所以这里的-100%margin值正好使左栏div定位到了页面的左侧；右侧栏也是左浮动，其margin-left也是负值，大小为其本身的宽度即200px。

   .wrapper{
          width: 100%;
          height: 200px;
      }
      .main{
          width: 100%;
          height: 200px;
          float: left;
      }
      .body{
          height: 200px;
          margin: 0 200px;
          background: green;
      }
      .left,.right{
          float: left;
          width: 200px;
          height: 200px;
      }
      .left{
          margin-left: -100%;
          background: red;
      }
      .right{
          margin-left: -200px;
          background: yellow;
      }

 <div class="wrapper">
        <div class="main">
            <div class="body"></div>
        </div>
        <div class="left">1</div>
        <div class="right">3</div>
    </div>

三栏相互关联，可谓真正意义上的自适应，有一定的抗性——布局不易受内部影响。因为不受内部影响，所以在实际操作中用的比较多。

自身浮动法
- 此方法代码最简单。应用了标签浮动跟随的特性。左栏左浮动，右栏右浮动，主体直接放后面，就实现了自适应。

 .wrapper{
          width: 100%;
          height: 200px;
      }
      .left{
          width: 200px;
          height: 200px;
          float: left;
          background: red;
      }
      .main{
          height: 200px;
          margin: 0 200px;
          background: green;
      }
      .right{
          width: 200px;
          height: 200px;
          float: right;
          background: yellow;
      }

  <div class="wrapper">
        <div class="left">1</div>
        <div class="right">3</div>
        <div class="main">2</div>
    </div>

这布局需要注意的是主体main的属性，这个主体必须放在坐后面，其它两个位置随意放。如果主体放在最前的时候，后面两个固定栏就会被主体的margin撑开，从而会在下一行显示。所以一定要注意。
这三种布局方法各有各的好处，其中margin负值法用的最为广泛，实际用的也比较的多。