美文网首页
2. 七种局中方式

2. 七种局中方式

作者: CeaCrab | 来源:发表于2022-11-21 11:37 被阅读0次

居中条件

1. 如果 .parent 的 height 不写,你只需要 padding: 10px 0; 就能将 .child 垂直居中;
2. 如果 .parent 的 height 写死了,就很难把 .child 居中,以下是垂直居中的方法。
3. 忠告:能不写 height 就千万别写 height。

居中方式

HTML

// HTML
<body>
  <div class="parent">
    <div class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
    </div>
  </div>
</body>

1. flex

.parent{
  height: 600px;
  border: 3px solid red;
  
  display: flex;
  justify-content: center;
  align-items: center;
}
.child{
  border: 3px solid green;
  width: 300px;
}

2. absolut + margin

.parent{
  height: 600px;
  border: 1px solid red;
  position: relative;
}
.child{
  border: 1px solid green;
  position: absolute;
  width: 300px;
  height: 200px;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

3. translate + -50%

.parent{
  height: 600px;
  border: 1px solid red;
  position: relative;
}
.child{
  border: 1px solid green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

4. margin-top + -50%

.parent{
  height: 600px;
  border: 1px solid red;
  position: relative;
}
.child{
  border: 1px solid green;
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
  height: 100px;
  margin-top: -50px;
}

5. 100% 高度的 after 和 before + inline-block

// HTML
<body>
  <div class="parent">
    <span class=before></span><div class="child">
      
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
      
    </div><span class=after></span>
  </div>
</body>

// CSS
<style>
  .parent{
  border: 3px solid red;
  height: 600px;
  text-align: center;
}

.child{
  border: 3px solid black;
  display: inline-block;
  width: 300px;
  vertical-align: middle;
}

.parent .before{
  outline: 3px solid red;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.parent .after{
  outline: 3px solid red;
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
</style>

6. table 自带居中

// HTML
<body>
  <table class="parent">
    <tr>
      <td class="child">
      一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
      </td>
    </tr>
  </table>
</body>

// CSS
<style>
  .parent{
  border: 1px solid red;
  height: 600px;
}

.child{
  border: 1px solid green;
}
</style>

7. div 装成 table

//HTML
<body>
  <div class="table">
      <div class="td">
        <div class="child">
          一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字一串文字
        </div>
    </div>
  </div>
</body>

// CSS
<style>
  div.table{
  display: table;
  border: 1px solid red;
  height: 600px;
}

div.tr{
  display: table-row;
  border: 1px solid green;
}

div.td{
  display: table-cell;
  border: 1px solid blue;
  vertical-align: middle;
}
.child{
  border: 10px solid black;
}
</style>

相关文章

  • 2. 七种局中方式

    居中条件 1. 如果 .parent 的 height 不写,你只需要 padding: 10px 0; 就能将 ...

  • Spring MVC(初识)

    Spring MVC 一、Spring AOP的第七种方式说明 在使用Spring AOP的第七种方式过程中,我遇...

  • 20170527 [中英互译] 管理七浪费

    自我学习:丰田生产方式的七种浪费,如何用在管理中。

  • 印度圣人罗摩达斯名作选:在服务中虔诚

    1. 之前,我已经解释了第六种虔敬方式的特质。现在,请仔细聆听第七种虔敬之道。 2. 要知道,第七种虔敬是“在服务...

  • 《有钱人和你想的不一样》读书笔记4

    第二篇中,作者介绍了有钱人和穷人的十七种不同的财富档案,也就是十七种不同的与财富密切相关的思维方式。 财富档案一 ...

  • iOS 单例实现方式与优缺点

    之前在 实现Singleton 模式——七种实现方式中发现java 的单例有七种实现方式,对里面的懒汉和饿汉模式稍...

  • 解析库 -- lxml

    安装lxml库 (支持HTML和XML解析,支持XPath解析方式) Xpath 在 XPath 中,有七种类型的...

  • 一次实验

    一次实验 ——当前语文新课改中如何破转变学生学习方式的局? 当前语文新课改为什么仍须破转变学生学习方式的局?为了提...

  • 深户的少儿医保办理流程

    两种方式: 1.自己办理 2.孩子上幼儿园在学校统一办理 登录深圳市社会保险基金管理局网页中的“个人网上申报”中的...

  • Android中实现滑动的七种方式

    在Android中想要实现实现滑动有很多方法,这篇博客将提供一些实现滑动的思路,希望可以帮助到有需要的人。 一、A...

网友评论

      本文标题:2. 七种局中方式

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