CSS 居中完全指南

hqman 发布于2019-08-30 13:03 / 1628人阅读

摘要：在文本前面插入一个高度为百分百的伪元素，让文本与其垂直对齐。块级元素或者使用垂直水平居中或者使用

翻译自 https://css-tricks.com/centering-css-complete-guide/

预先给出这样的样式

水平居中 子元素为 inline 或者 inline-* 元素（例如 text 或者 links)

使用 text-align: center; 的方法

子元素为 block 元素

使用 margin: 0 auto; 的方法

有多个 block 元素

如果你有两个或更多的 block-level 元素需要在一行内居中

方法一：
改变 display 的类型为 inline-block

方法二：
使用 flexbox

垂直居中 子元素为 inline 或者 inline-* 元素（例如 text 或者 links) 只有一行文本

一个小技巧是将 height 与 line-height 设置为相同的值


  center

有多行文本

可以尝试将父元素的 display 设置为 table ，同时设置该元素的 display 为 table-cell，然后设置vertical-align: middle


  I"m vertically centered multiple lines of text in a CSS-created table layout.

或者实际的将其放入 table 中


  
    
      I"m vertically centered multiple lines of text in a real table cell.

或者使用 flexbox


  I"m vertically centered multiple lines of text in a flexbox container.

如果上面的方法都不起作用的话，可以使用一个幽灵元素。在文本前面插入一个高度为百分百的伪元素，让文本与其垂直对齐。


  I"m vertically centered multiple lines of text in a flexbox container.

块级元素

或者使用 flexbox

垂直 & 水平居中

或者使用 flexbox

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115271.html

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

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

cc17 2019-08-02 10:11 评论0 收藏0
CSS居中完全指南——构建CSS居中决策树

摘要：但是部分浏览器存在兼容性的问题。核心代码宽高不固定水平垂直居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示使用布局垂直水平居中核心代码使用布局垂直水平居中演示 CSS居中完全指南——构建CSS居中决策树 showImg(https://segmentfault.com/img/bV8tDq); 本文总结CSS居中,包括水平居中和垂直居中.本文相当于CSS决策树,下次再遇到...

AlienZHOU 2019-08-30 15:53 评论0 收藏0
CSS居中完全指南

摘要：原载于，本文着重提取文中的方法，不完全翻译。人们经常抱怨在中居中元素的问题，其实这个问题其实并不复杂，只是因为方法众多，需要根据情况从众多方法中选取一个出来。原载于CSS-Trick，本文着重提取文中的方法，不完全翻译。如有需要，直接原文查看。人们经常抱怨在CSS中居中元素的问题，其实这个问题其实并不复杂，只是因为方法众多，需要根据情况从众多方法中选取一个出来。接下来，我们做一个‘...

qujian 2019-08-30 12:47 评论0 收藏0
朝花夕拾：CSS居中完全指南

摘要：正文居中是常被开发者抱怨的问题之一。注意你不能将浮动元素居中。水平且垂直居中你可以将前面的方法任意组合起来，实现完美的居中效果。这样就可以使元素水平且垂直居中，并具有良好的浏览器兼容性。参考 Centering in CSS: A Complete Guide BY CHRIS COYIER ON SEPTEMBER 2, 2014 附：文中涉及到了flex的一些用法，如果没有接...

laznrbfe 2019-08-29 13:45 评论0 收藏0
居中的css:完全指南(翻译)

摘要：水平水平居中有行内元素和块元素，行内元素有文字图片链接等块元素主要是等元素。块元素对于一个块元素，可以设置其和自动，就像这样在线查看无论块元素的宽度是否已知，都可以实现水平居中。这里主要参考的是CHRIS COYIER写的一篇的文章(点击查看)，主要讲了关于css水平、垂直居中的一些方法,每个方法后面都有一个demo，可以在线查看效果。 1 水平水平居中有行内元素和块元素，行内元素...

Integ 2019-08-30 12:54 评论0 收藏0