✏️手写居中No.1 - Githubissues

MJingv / jehol-person-blog

Jehol's Blog 🙋 (hexo+react)

https://mjingv.github.io/JeholBlog/

0 stars 1 forks source link

✏️手写居中No.1 #70

Open MJingv opened 3 years ago

MJingv commented 3 years ago

https://github.com/yanhaijing/vertical-center

水平垂直居中

子元素宽高未知

absolute+transform absolute( left&top是50% )+ transform( top&left是子元素宽高一半 )
flex
grid
lineheight（行内元素） text-align是center + lineheight是父高

writing-mode


.wrap{
writing-mode:vertical-lr;
text-align:center;
height:100%
}
.content{
writing-mode:horizontal-tb;
text-align:center;
width:100%
display:inline-block;
}

- table（过多冗余代码）类表单模型
```html
<html>
 <tbody>
  <tr>
   <td style="height:300px;width:300px;text-align:center;">
    <div style="display:inline-block">aaa</div>
   </td>
  </tr>
 </tbody>
</html>

css-table（宽高确定）


.wrap{
display:table-cell;
text-align:center;
vertical-align:middle;
height:300px;
width:300px;
}
.content{
display:inline-block;
}



### 子元素宽高已知
- absolute/fixed+0（移动端常用）
``` absolute ( left&right&top&bottom是0 ) +margin(auto)```
- absolute/fixed+负margin
  ```absolute( left&top是50% )+margin ( top&left是子元素宽高一半 ) ```
- absoulte+calc
```absolute( left&top是 calc(50% - 子元素宽高一半) ）```