居中效果们

Posted 阿琼的学习笔记

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了居中效果们相关的知识,希望对你有一定的参考价值。

水平居中

内联元素  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方案

 


去年在杭州

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

受了委屈在那个人面前哭

他给我两个评价

自我,不独立

那时候我不明白

现在我明白了

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

 

以上是关于居中效果们的主要内容,如果未能解决你的问题,请参考以下文章

居中效果们

用css怎么设置字体的投影,用div+css能不能做出投影的效果,好像没有这个属性FILTER。朋友们能不能帮我解

css常用代码片段 (更新中)

没有弹性盒的垂直居中

片段中的布局不居中

怎样使网页设计中的css盒子内容居中?