css定位、居中、两端对齐方式

iconyy
1,508 阅读5分钟

本文已参与「新人创作礼」活动，一起开启掘金创作之路。

在做html页面时，最常用的css就有定位和居中，居中包括垂直居中和水平居中，另外如果是文本的话一般还有两端对齐方式的设置,包含单行文本和多行文本。

css定位

css最常见的有绝对定位(absolute)和相对定位(relative),另外还有 fixed、sticky、static。

  • position: static=>静态定位,是position的默认值，元素框正常生成，也就是没有定位时的正常显示。
  • position: absolute=> 是相对于元素最近的已定位的祖先元素。注意关键词，最近的已定位的，可以帮助理解一篇文中有多个已定位的祖先元素的情况。absolute会脱离文档流
  • position: relative=> 相对定位是相对于元素在文档中的初始位置
  • position:fixed=> 是相对于屏幕的可视区域定位，也会脱离于文档流。可以用于居于屏幕中间的一些tips等。
  • position：sticky=>是CSS3新发布的一个属性,元素并不脱离文档流，仍然保留元素原本在文档流中的位置。当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。比如设置联系人单独姓的列表头，可以让列表头始终居于该列表的头部位置。

这几个比较好理解，但是要注意使用后是否会脱离文档流。

居中

居中分为水平居中和垂直居中

水平居中

水平居中其实还要分成行内元素和块级元素，块级元素还可以分为定宽和不定宽度。

行内元素

  1. text-align：center //这是最常见的居中方式

块级元素

  1. 定宽：
  • margin：0 auto；//该方法只能实现水平居中，不能实现垂直居中。但是对于absolute的元素又可以设置垂直居中 ，关于auto为什么能实现居中，可以点这里看我之前 总结的内容。
  • absolute+子容器设置负margin值（绝对值是子容器宽度的一半），该方法其实还有另外写法。
  1. 不定宽
  • display：table; margin：0 auto; //将子元素设置为块级表格来显示（类似），再将其设置水平居中
  • display:absolut; left:50%; transform:translateX(-50%)//父元素设置为相对定位，子元素设置为绝对定位，向右移动子元素，移动距离为父容器的一半，最后通过向左移动子元素的一半宽度以达到水平居中。
  • 子容器inline-block 父容器text-align:center,子容器是父容器里面的元素，对父容器设置居中，会让子容器居中显示。注意，text-align具有继承性，子元素中的内容同样也会居中。
  • display:flex; justify-content,flex布局。
  • 父容器设置Flex布局，子元素(margin:0 auto)。

多个块级元素居中

  1. flex+justify-content , flex布局，可以设置主轴对齐方式
  2. inline-block+父容器text-align:center,该方法同上文不定宽中方法

浮动元素居中

1、通过父子容器都相对定位

    .box{
        float:left;           //浮动
        position:relative;
        left:50%;
    }
    p{
        float:left;          //浮动
        position:relative;
        right:50%;
    }
    <div class="box">
        <p>浮动</p>
        <p>居中</p>
    </div>

外部元素加上float，实现浮动。先让子元素跟着父元素一起向右偏移页面的一半，这个时候两个都没居中，再让子元素（也是浮动元素）相对父元素向左偏移父元素的一半，以此来实现居中。
2、flex的justify-content属性，实现水平居中

    .parent {
        display:flex;
        justify-content:center;
    }
    .chlid{
        float: left;
        width: 200px;          //有无宽度不影响
    }
    <div class="parent">
        <span class="chlid">要居中的浮动元素</span>
    </div>

绝对定位

absolute+transform

    <style>
        .child {
            position:absolute;        //子元素
            left:50%;                 //子元素移动父元素的一半宽度
            transform:translateX(-50%);  //子元素移动子元素的一半宽度
        }
        .parent {
            position:relative;        //父元素
        }
    </style>
    <div class="parent">
        <div class="child">Demo</div>
    </div>

垂直居中

  • absolute+负margin

    #container {
    position: relative;
}
#center {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -50px 0 0 -50px;
}
<body>
    <div id='container'>
        <div id='center' style="width: 100px;height: 100px;">center</div>
    </div>
</body>

  • 父元素flex/grid,子元素margin:auto(最简单写法)

        #container {
        height: 100px; //须有高度
        display: grid;
    }
    #center {
        margin: auto;
    }

  • 父元素flex，垂直方式是center

    align-items属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。

        #container {
        height: 100vh;//须有高度
        display: flex;
        justify-content: center;
        align-items: center;
    }

  • absolute+transform（理解同上方水平居中之绝对定位）

        #container {
        position: relative;
    }
    #center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    <body>
        <div id='container'>
            <div id='center' style="width: 100px;height: 100px;">center</div>
        </div>
    </body>

  • 子table+margin，父table-cell+vertical-align

    父元素设置为table，子元素设为table-cell，类似于将div转为table样式。

    <style>
    .parent {
        width: 400px;
        height: 400px;
        display: table-cell;
        vertical-align: middle;
        background-color: pink;
    }
    .child{
        width: 100px;
        height: 100px;
        display: table;
        margin: 0 auto;
        background-color: cyan;
    }
</style>
</head>
<body >
  <div class="parent">
    <div class="child">hello,world</div>
  </div>
</body>

    image.png

两端对齐

两端对齐分单行和多行
一帮来说，如果是多行文字，一般都是前n-1行两端对齐，最后一行默认，因此对于两端对齐来说，分为单行和多行理解更好。

多行文字

justify-content有两种方式，看图理解会更好一点。

  • justify-content: space-around

image.png

  • justify-content: space-between

image.png

  • text-align:justify

单行文字实现两端对齐（这是主要想分享的）

此方法通过在div内部内容后面添加span元素，span元素内容为空，且padding-left为div内容想实现两端对齐的宽度，div设置为text-align：center。此方法可以实现单行文字的两端对齐，并且对于wkhtmltopdf同样有效呦 !!!

      <style>
        div {
          width: 300px;
          text-align: justify;
          background-color: aquamarine;
        }

        div>span {
          display: inline-block;
          padding-left: 300px;
        }
      </style>
      <body>
          <div class="parent">
            1 2 3 4 5 <span></span>
          </div>
      </body>

image.png
上方是单行文字，多行文字也可以实现最后一行两端对齐。

      <style>
        div {
          width: 300px;
          text-align: justify;
          background-color: aquamarine;
        }

        div>span {
          display: inline-block;
          padding-left: 300px;
        }
      </style>
      <body>
          <div class="parent">
           1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 1 2 3 4 5 <span></span>
          </div>
      </body>

image.png

avatar
文章
阅读
粉丝