美文网首页前端栏
关于居中布局

关于居中布局

作者: Kailee | 来源:发表于2019-11-12 11:23 被阅读0次

1.水平居中

方案一:inline-block + text-align

<style>
    .parent {
      background: lightblue;
      text-align: center;
      max-width: 300px;
    }
    .child {
      background: lightslategrey;
      display: inline-block;
      text-align: left;
    }
  </style>
  <body>
    <div class="parent">
      <div class="child">我们想左对齐<br/>我们想左对齐123<br/>我们想左对齐123<br/></div>
    </div>
  </body>

效果图如下


image.pngimage.png

解读:因为当 text-align: center; 设置在一个块级元素上的时候可以对里面的 inline 级别的元素起作用,child 我们把 display 设置成了 inline-block, 所以父元素设置了 center 自然就居中了。

注:由于 text-align 会继承的,所以子元素里的 text-align 也是 center 了,那如果我想设置子元素里的文本是左对齐的,那么只要将 child 里设置 text-align: left; 覆盖即可。

方案二:table + margin

<style>
    .parent {
      background: lightblue;
      max-width: 300px;
    }
    .child {
      background: lightslategrey;
      display: table;
      margin: 0 auto;
    }
  </style>
  <body>
    <div class="parent">
      <div class="child">我们想左对齐<br/>我们想左对齐123<br/>我们想左对齐123<br/></div>
    </div>
  </body>

效果图同方案一

解读:当设置为 table 时,如果没有对 table 设置宽度 100%,那么宽度就是和内容一样;table 另一个特性就是可以应用 margin 属性,所以设置了 margin: 0 auto; 即可实现。

方案三:absolute + transform

  <style>
    .parent {
      background: lightblue;
      width: 300px;
      height: 80px;
      position: relative;
    }
    .child {
      background: lightslategrey;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  </style>
  <body>
    <div class="parent">
      <div class="child">我们想左对齐<br/>我们想左对齐123<br/>我们想左对齐123<br/></div>
    </div>
  </body>

方案四:flex + justify-content

<style>
    .parent {
      background: lightblue;
      width: 300px;
      display: flex;
      justify-content: center;//或者不用这个,在 child 里设置 margin: 0 auto; 也行
    }
    .child {
      background: lightslategrey;
      margin: 0 auto;//或者不用这个,在 parent 里设置 justify-content: center; 也行
    }
  </style>
  <body>
    <div class="parent">
      <div class="child">我们想左对齐<br/>我们想左对齐123<br/>我们想左对齐123<br/></div>
    </div>
  </body>

2. 垂直居中

方案一:table-cell + vertical-align

<style>
    .parent {
      background: lightblue;
      height: 200px;
      display: table-cell;
      vertical-align: middle;
    }
    .child {
      background: lightslategrey;      
    }
  </style>
  <body>
    <div class="parent">
      <div class="child">
        Demo
      </div>
    </div>
  </body>

效果图:


image.pngimage.png

方案二:absolute + transform

 <style>
    .parent {
      background: lightblue;
      height: 200px;
      text-align: center;
      max-width: 80px;
      
      position: relative;
    }
    .child {
      background: lightslategrey;  
      width: 100%;

      position: absolute;
      top: 50%;
      transform: translateY(-50%);    
    }
  </style>
  <body>
    <div class="parent">
      <div class="child">
        Demo
      </div>
    </div>
  </body>

方案三:flex + align-items

<style>
    .parent {
      background: lightblue;
      height: 200px;
      text-align: center;
      max-width: 80px;
      display: flex;
      align-items: center;
    }
    .child {
      background: lightslategrey;  
      width: 100%; 
    }
  </style>
  <body>
    <div class="parent">
      <div class="child">
        Demo
      </div>
    </div>
  </body>

3. 水平垂直居中(结合即可)

方案一:inline-block + text-align + table-celln + vertical-align

<style>
    .parent {
      background: lightblue;
      height: 200px;
      width: 300px;
      text-align: center;
      display: table-cell;
      vertical-align: middle;
    }
    .child {
      background: lightslategrey;
      width: 80px;
      display: inline-block;
    }
  </style>
  <body>
    <div class="parent">
      <div class="child">
        Demo
      </div>
    </div>
  </body>

方案二:absolute + transform

<style>
    .parent {
      background: lightblue;
      height: 200px;
      width: 300px;
      position: relative;
    }
    .child {
      background: lightslategrey;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
  <body>
    <div class="parent">
      <div class="child">
        Demo
      </div>
    </div>
  </body>

方案三:table-cell + vertical-align + align-items

<style>
    .parent {
      background: lightblue;
      height: 200px;
      width: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .child {
      background: lightslategrey;
    }
  </style>
  <body>
    <div class="parent">
      <div class="child">
        Demo
      </div>
    </div>
  </body>

相关文章

  • 关于居中布局

    发现之前写过的又忘了。 之前在百度前端学院的时候写过居中。【任务】 【自己写的例子】 【代码】 水平居中 非块...

  • 关于居中布局

    1.水平居中 方案一:inline-block + text-align 效果图如下 解读:因为当 text-al...

  • 居中布局

    水平居中 垂直居中 垂直水平居中 已知元素的宽高的居中布局 定位居中布局 盒模型居中布局 图片的垂直水平居中(利用...

  • 布局

    布局主要分为布局和居中,布局一般指的是多个div的左右布局或者左中右布局。居中就是水平居中和垂直居中 布局 只要记...

  • 页面布局的几种方式

    居中布局 一、水平居中布局 水平居中:absolute + transform: translateX(-50%)...

  • CSS布局与水平垂直居中

    左右布局 左中右布局 水平居中 垂直居中 水平垂直居中 左右布局 float实现左右布局 子元素设置float: ...

  • 页面架构

    布局解决方案 水平居中布局 垂直居中布局 水平垂直都居中的布局 多列布局 多列等分布局 多列等高布局 在多列布局的...

  • CSS边用边学(一):一站式各种布局实践

    目录 布局相关属性displaypositionfloat 各种布局两栏布局三栏布局水平居中垂直居中 总结 概述 ...

  • SASS常用样式总结

    关于媒体查询 关于flex布局 关于动画 透明度 超出的文本省略 圆角 阴影 居中

  • 无标题文章

    css左右布局 两个块级元素实行左右布局. 左中右布局 水平居中 块级元素水平居中 内联元素居中 垂直居中 行内元...

网友评论

    本文标题:关于居中布局

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