用css居中所有东西

原文链接
最近我们深入♂了解了css布局的核心概念并且探寻绝对布局和相对布局的不同.We’re going to follow that up with another CSS layout talk, this time based around a fundamental question that almost every new developer asks: how do you center something? (抱歉,这句话长的我没有理清楚hhh,大意是为了引出我们今天的课题。)
有一堆不同的web元素和布局情形,每一个都需要一种特定的解决方案来居中(包括垂直和横向居中)

开始了

横向居中

1.在视窗或者浏览器窗口中横向居中,为了表述方便,给定一个div,并且给个深色背景:

div{
height:200px;
width:200px;
background:#222;
}

如图:


可见,在通常情况下,div会出现在左上角视窗的左上角,但是我们<big>不清楚窗口的实际大小</big>,这意味我们不能使用使用绝对定位将其放置在一个特定的点。
于是我们对margin使用auto属性,效果如下:

如你所见,使用一行css代码就使得div相对于父元素居中(过会儿再翻。。)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,703评论 1 92
  • 前言 温馨提示:本文较长,图片较多,本来是想写一篇 CSS 布局方式的,但是奈何 CSS 布局方式种类太多并且实现...
    sunshine小小倩阅读 8,391评论 0 59
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,729评论 25 709
  • 梦不作声,源于今早的梦,醒来清晰得宛如刚刚发生 但却又消失的 无声无息。 也许很多事情本没有理由,因此不必牵强的要...
    一只默阅读 2,472评论 0 0
  • 继续上文的初级篇,聊一聊存储过程的常用特性,谈谈存储过程在工作中的具体使用,希望能对读者有所帮助。 参数传入模式 ...
    天边一钩残月带三星阅读 5,278评论 0 11

友情链接更多精彩内容