在web开发中,当你遇到居中元素时,知道越多关于元素本身和父级元素的信息,居中做起来就很轻松。但是,当遇到你一点都不知道的元素该怎么办?
It's still kinda doable。

不会很难:已知元素
当你知道元素和父级元素的长宽(其中不考虑浮动的环境),傻瓜式的办法就是采用绝对定位,设置top和left将其设置居中。如果你只知道元素的长宽,但是父级元素长宽是变化的,那么可以采用定位改元素,设置top和left为50%,然后采用margin-top和margin-left为宽和长为值的一半,并为负值。
如下图:

难:未知元素
那么难点来了,当你不知道元素的尺寸怎么办,同时父级元素也是不知道。


最简单的方法是采用table

<table style="width: 100%;">
<tr>
<td style="text-align: center; vertical-align: middle;">
Unknown stuff to be centered.
</td>
</tr>
</table>

  

当然你会担心table做法会引来语义上不好, 你可以尝试这么做,同样可以做到像tables

<div class="something-semantic">
<div class="something-else-semantic">
Unknown stuff to be centered.
</div>
</div>
.something-semantic {
display: table;
width: 100%;
}
.something-else-semantic {
display: table-cell;
text-align: center;
vertical-align: middle;
}

css tables可能更合适,但是也不一定。 table确实渲染的方式和普通的block不一样。例如100%长度的元素,table只会根据内部需求设置长度(为什么我在本地试一下,并不是,有待考察),而block的div是拓展到和父类元素一样宽。

然后某人给我写到一个很聪明的方法。 如果我们设置一个ghost元素在父类元素中,这个ghost元素的高度是100%,那么我们使用vertical-align:middle可以使得父级元素内的元素居中。

/* This parent can be any width and height */
.block {
text-align: center; /* May want to do this if there is risk the container may be narrower than the element inside */
white-space: nowrap;
} /* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
} /* The element to be centered, can also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}

  

ghost元素一定是一些语义化的元素吗? 不,可以是伪元素。
这种方法是最好的,但是兼容性是有问题,IE7一下不支持伪代码的,可以采

用span代替

居中未知元素(翻译https://css-tricks.com/centering-in-the-unknown/)的更多相关文章

  1. CSS居中完全指南——构建CSS居中决策树

    CSS居中完全指南--构建CSS居中决策树 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到CSS居中问题时有章可循. 参考Centering in CSS: A Com ...

  2. 右边根据左边的高度自动居中只需要两行CSS就可以完成

    右边根据左边的高度自动居中只需要两行CSS就可以完成 <style type="text/css" > div{ display: inline-block; vert ...

  3. 【翻译】CSS水平和垂直居中的12种方法

    英语原文链接 在CSS中有许多不同的方法能够做到水平和垂直居中,但很难去选择合适的那个.我会向你展示我所看到的所有的方法,帮助你在所面对的情境下选择最棒的那一个. 方法1 此方法将只能垂直居中单行文本 ...

  4. Normalize.css源码注释翻译&浏览器css兼容问题的理解

    版本v5.0.0源码地址: https://necolas.github.io/normalize.css/5.0.0/normalize.css 翻译版: /*! normalize.css v5. ...

  5. css图片居中,通过纯css实现图片居中的多种实现方法

    在网页布局中,图文排版是我们常用的,那么经常会遇到如何让图片居中显示呢,这篇文章将总结常用css实现图片居中的方法总结: html结构: <div class="demo" ...

  6. css 多个不定数量提交按钮居中显示,纯css解决

    前几天在公司修改一个css 多个按钮居中问题,其实这样的问题很多前端程序员都遇到过,举个例子吧: 在一行中有三个按钮或是两个按钮...个数不定,然后间距固定:然后就有很多人把所有按钮放到一个div中, ...

  7. [翻译]解读CSS中的长度单位

    测量,在WEB设计上是非常重要的.在CSS中有至少10种不同的测量单位.每种单位都有其独特的作用,使用它们,可以使页面,在各种设备上,很好的工作.一旦你熟悉了所有这些单位,你可以更准确地设定元素的大小 ...

  8. 翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案

    原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者: Anthony Gore 译者: 蜗牛 ...

  9. 【翻译】CSS Animations VS the Web Animations API:案例学习

    原文地址:CSS Animations vs the Web Animations API: A Case Study May 03, 2017 css, javascript 上周我写了我如何使用C ...

随机推荐

  1. java多线程-创建线程

    大纲: Thread创建线程. Runnable接口. Callable接口. 小结 一.java创建线程--继承Thead类 创建一个类继承Thead类,并重写run方法. class Test { ...

  2. Microsoft使用技巧

    1.拍摄屏幕内容的截图 按 Win + Shift + S 以打开截图栏,然后将光标拖动到要捕获的区域. 截图区域将保存到剪贴板. 2.使用键盘添加表情符号 随心随处表达自我. 按 Ctrl + Sh ...

  3. 命令行模式运行jmeter,主从方式运行jmeter

    jmeter很小,很快,使用方便,可以在界面运行,可以命令行运行.简单介绍下命令行运行的方式: sh jmeter.sh -n -t my-script.jmx -R 10.6.5.31,10.6.5 ...

  4. CSAPP阅读笔记-链接-第七章-P464-P500

    链接概述 经预处理器->编译器->汇编器处理后,源文件可被转化为一组可重定位目标文件,链接器将它们组合起来形成可执行文件. 每个可重定位目标文件由不同的“代码节”和“数据节”组成,每一个节 ...

  5. Android微信开放平台,申请移动应用的 应用签名 如何获取

    在微信开放平台,申请移动应用的时候: https://open.weixin.qq.com/cgi-bin/appcreate?t=manage/createMobile&type=app&a ...

  6. 怎么为android控件边缘添加阴影

    为控件设置一个有阴影感的背景图片即可,可以使用shape 在自定义shape中增加一层或多层,并错开,即可显示阴影效果.为增加立体感,按钮按下的时候,只设置一层.我们可以通过top, bottom, ...

  7. http学习总结及思考

    针对前面几章的学习,加上在学长的指导下,希望对前面知识进行简单总结. 1.在报文的7个方法中,最常用的是:Head和Post 响应头:If-Modified-Since HEAD -> 服务器返 ...

  8. linux程序分析工具介绍(二)—-ldd,nm

    本文要介绍的ldd和nm是linux下,两个用来分析程序很实用的工具.ldd是用来分析程序运行时需要依赖的动态库的工具:nm是用来查看指定程序中的符号表相关内容的工具.下面通过例子,分别来介绍一下这两 ...

  9. node Error: Could not locate the bindings file. Tried:解决

    问题描述: Error: Could not locate the bindings file. Tried: → C:\code\xxx\node_modules\deasync\build\dea ...

  10. Excel数据导入数据库

    maven依赖 <!--excel相关依赖--> <dependency> <groupId>org.apache.poi</groupId> < ...