居中效果们

Posted 2020-09-07 阿琼的学习笔记

水平居中

内联元素  text-align: center;

块级元素 margin: auto;

垂直居中

用绝对定位解决

需要固定的高度和宽度的一种：

.center{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
}    

这样可以在整个页面居中

这有个局限就是要一个固定的尺寸，而需要垂直居中的元素的尺寸通常需要由它的内容来决定。可以使用css3的 transform 中的 translate() 设置百分比，让元素移动是相对于自身。

不需要固定宽度的一种：

.center{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

这样有一些局限：

绝对定位对整体布局影响大；

如果垂直居中的元素比视窗高，会被裁掉；

在一些浏览器中，可能会导致元素出现略微的模糊，因为元素可能被放置在半个元素上。可以通过 transform-style:preserve-3d 来解决。

视窗单位解决

.center{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50vw;
    top: 50vh;
    transform: translate(-50%, -50%);
}

这样能相对视窗居中

flexbox方案

 

---

去年在杭州

在没钱没朋友的情况下一个人跑去上海实习

受了委屈在那个人面前哭

他给我两个评价

自我，不独立

那时候我不明白

现在我明白了

我太过在意“我”的想法与“我”的分量；我在很多人眼里都很独立，但是我的自我评价，确实建立在外界的评论上