在CSS中居中的代码是啥

Posted 2023-04-28

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在CSS中居中的代码是啥相关的知识，希望对你有一定的参考价值。

通过vertical-align:middle实现CSS垂直居中是最常使用的方法，但是有一点需要格外注意，vertical生效的前提是元素的display：inline-block。因为inline-block可以兼具行内元素和块级元素的特点，能够使得元素有宽度和高度。从而在盒子内能够实现居中

通过display:flex实现CSS垂直居中的方法是给父元素display:flex;而子元素align-self:center;

这个跟CSS水平居中的原理是一样的，只是在flex-direction上有所差别，一个是row(默认值)，另外一个是column。

给父元素display:table，子元素display：table-cell的方式实现CSS垂直居中，表格也是常用的居中模式，缺点就是会对下面的元素某些样式造成一定的影响，不推荐经常使用这个方式。

先给父元素position:relative，再给子元素position:absolute，通过translateY即可定位到垂直居中的位置。这个是纵轴居中，由CSS3的新特性translate，可以改变元素在纵轴上的偏移。

设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况。同样也是纵轴居中。

括展资料：

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现html（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 CSS百度百科CSS参考手册

参考技术A

水平居中

设置元素为文本或者图片等行内元素时，可以通过

text-align:center;实现。

当设置的元素为块状元素时，text-align:center; 就不起作用了，这时候分两种情况：
1) 定宽块状元素
通过设置左右 margin 为 auto 即可实现。

margin:0 auto;

2) 不定宽块状元素
方法一：
① 加入 table 标签；
② 设置 display:inline 方法，然后 text-align:center 实现。与第一种类似，显示类型设为行内元素；
优势：不用增加无语义标签
缺点：变成了行内元素，少了一些功能，例如长度。
③ 设置 position:absolute 和 left 50%，利用相对定位的方式，将元素左偏移50%；

垂直居中

父元素确定高度的单行文本
通过设置 line-height 与 height 相同的值即可完成。
line-height 与 font-size 的计算之差，在 CSS 中称为“行间距”，分为两半，分别加到一个文本内容的顶部和底部。
缺点：当文字内容的长度大于块的宽时，就有内容脱离了块。

父元素高度确定的多行文本
1) 使用 padding-top 和 padding-bottom 来居中。
利用父元素高度减去文本高度，所得的值平分到 top bottom，达到居中的目的。

2) 使用插入 table (包括 tbody tr td) 标签，同时设置 vertical-align:middle (在父元素设置此样式时，会对 inline-block) 类型的子元素都有用。

3) 在 chrome firefox IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell (设置为表格单元显示)，激活 vertical-align 属性，但 IE6 IE7 并不支持。
优点：不用加多余的无意义的标签
缺点：兼容性差，且修改了 display 的 block 变成了 table-cell，破坏了原有的块状元素的性质。

资料拓展：

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

参考技术B

可从两个方面来确保在各种浏览器中全局居中：
<style type="text/css">
bodytext-align:center;/*针对老式浏览器*/
#wrappermargin:0 auto;width:1000px;/*要指定宽度*/
</style>

<body>
<div id="wrapper">页面内容</div>
</body>

扩展资料：

一、认识布局居中与内容居中

1、CSS DIV布局居中
布局居中是对框架盒子本身设置。让网页主体水平居中于浏览器中，就需设置margin:0 auto实现布局居中。

布局居中针对框架盒子本身居中。

布局居中主要是对布局框架设置比如（DIV盒子）设置。一般网页布局中最外层主体框架设置布局居中样式（margin:0 auto）实现。如果不设置布局居中代码，其有的浏览器中主体是居中的，但有的浏览器中靠左显示，引起兼容性问题，所以要让一个盒子水平居中于浏览器中就必须设置一个margin:0 auto样式。

特点：实现居中非常特别使用margin样式实现，需要特别注意。

2、CSS DIV内容居中
和DIV布局居中有着同样居中字眼的内容居中，则是对盒子里内容（文字、图片等内容）实现水平居中。使用CSS样式单词与值代码为text-align:center。不管是对div标签、h1标签、h2标签、p标签等html元素标签设置都能让其对于盒子里内容水平居中。

扩展CSS代码：
CSS内容居中：text-align:center
CSS内容靠左：text-align:left
CSS内容靠右：text-align:right

参考资料:博客园

参考技术C 水平居中：text-align:center
垂直居中：vertical-align:middle;line-height:30px;/*line-height块标记用到*/追问

不是字体，是整体

追答

如果是div 只需要使用margin:0 auto; 调整外补丁（外边距）

本回答被提问者采纳参考技术D 先给要定义的div定义宽度 width:***px; margin:0 auto; 这样就可以了

在浏览器窗口（或电子邮件客户端预览窗格）中居中 HTML 电子邮件内容的最佳方式是啥？

【中文标题】在浏览器窗口（或电子邮件客户端预览窗格）中居中 HTML 电子邮件内容的最佳方式是啥？【英文标题】：What's the best way to center your HTML email content in the browser window (or email client preview pane)?在浏览器窗口（或电子邮件客户端预览窗格）中居中 HTML 电子邮件内容的最佳方式是什么？ 【发布时间】：2011-02-20 21:56:49 【问题描述】：

我通常对margin:0 auto 使用 CSS 规则，并为基于标准浏览器的内容使用 960 容器，但我是 HTML 电子邮件创建的新手，我现在想以以下设计为中心没有标准 CSS 的浏览器窗口。

http://static.helpcurenow.org/mockups/emails/2010/may-survey/survey.html

我似乎记得在某处看到它也可以通过将您的电子邮件表格设计包装在一个设置为width:100% 的外部表格中并在 tbody 上为text-align:center 使用一些内联样式或类似的东西来完成它？

对此有最佳实践吗？

【问题讨论】：

"margin:0px auto" .. 仅供参考，当您使用 0 任何东西时，您不需要指定单位 :) 【参考方案1】：

要使表格在电子邮件中间居中，请使用

<table  align="center" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td>
            Your Content
        </td>
    </tr>
</table>

在中间使用对齐内容：

<table  border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center">
            Your Content
        </td>
    </tr>
</table>

【讨论】：

【参考方案2】：

我在 Outlook 和 Office365 上苦苦挣扎。令人惊讶的是，似乎起作用的是：

<table align='center' style='text-align:center'>
  <tr>
    <td align='center' style='text-align:center'>
      <!-- AMAZING CONTENT! -->
    </td>
  </tr>
</table>

我只列出了解决我的 Microsoft 电子邮件问题的一些关键事项。

我可以补充一点，构建一个在所有电子邮件上看起来都很好的电子邮件是一种痛苦。这个网站非常适合测试：https://putsmail.com/

它允许您列出您想要发送测试电子邮件的所有电子邮件。您可以将代码直接粘贴到窗口中，进行编辑、发送和重新发送。它帮助了我很多。

【讨论】：

谢谢，这对我有用。我试图将我在 Outlook 中使用发布者创建的电子邮件模板居中【参考方案3】：

在某些情况下，在 Outlook 2007、2010、2013 中将 html 电子邮件居中对齐时，margin="0 auto" 不会减少。

尝试以下方法：

使用 style="table-layout: fixed;" 将您的内容包装在另一个表格中并对齐=“中心”。

<!-- WRAPPING TABLE -->
<table cellpadding="0" cellspacing="0" border="0" style="table-layout: fixed;" align="center">
  <tr>
    <td>
      <!-- YOUR TABLES AND EMAIL CONTENT GOES HERE -->
    </td>
  </tr>
</table>

【讨论】：

如果只有一行一列，为什么要使用table？您没有使用 table 元素的任何功能。您在 html 电子邮件中使用表格，因为几乎所有客户端都可以使用的 html 电子邮件问题的解决方案将以某种方式涉及“添加另一个表格”【参考方案4】：

这是您的防弹解决方案：

<table  border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td  align="center" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:2px; color:#ffffff;">.</td>
    <td  align="center" valign="top">
      CONTENT GOES HERE
    </td>
    <td  align="center" valign="top" style="font-family:Arial, Helvetica, sans-serif; font-size:2px; color:#ffffff;">.</td>
  </tr>
</table>

试试吧，看起来有点乱，但即使使用雅虎邮件的新 Firefox 更新也能正常工作。（不将电子邮件居中，因为用 div 替换主表）

【讨论】：

小不可见的“句号”应该换成一个并且应该删除使小隐形周期隐形的说明。我什至无法通过这些设置向自己发送测试电子邮件，因为它们直接发送给我的提供商垃圾邮件地狱 :) 恶意软件防御使任何鱼腥味变得更加可疑......例如：` `【参考方案5】：

table align="center" ...这会对齐页面的表格中心。

使用 td align="center" 使该 td 内的内容居中，这对于居中对齐的文本很有用，但是您会遇到一些电子邮件客户端在子级别表中居中内容的问题，因此使用 td align 作为居中的***方法页面上的“容器”表不是这样做的。改用表格对齐。

仍然使用你的 100% 包装表，纯粹作为正文的包装，因为一些电子邮件客户端不显示正文背景颜色，但它会与 100% 表一起显示，所以将你的正文颜色添加到正文和 100% 表。

关于 html 电子邮件开发的所有怪癖，我可以一直讲下去。我只能说测试测试再测试。 Litmus.com 是测试电子邮件的绝佳工具。

你做的越多，你就会越了解什么在什么电子邮件客户端中有效。

希望这会有所帮助。

【讨论】：

【参考方案6】：

为了谷歌用户和完整性：

当我需要经历实现 html 电子邮件模板或签名的痛苦时，我总是使用以下参考： http://www.campaignmonitor.com/css/

我列出了大多数（如果不是全部）CSS 选项的 CSS 支持列表，在一些最常用的电子邮件客户端之间进行了很好的比较。

对于居中，请随意使用 CSS（因为 HTML 4.01 中不推荐使用 align 属性）。

<table  border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td style="text-align: center;">
            Your Content
        </td>
    </tr>
</table>

【讨论】：

在表格或其他块级元素居中时不起作用。你说得对，我不确定是否支持 margin: 0 auto;（与 width 结合使用），但这通常适用于浏览器，但我不确定电子邮件是否 -客户在这种情况下相处得很好。是的，我不确定是否所有浏览器都支持它，所以使用了可信赖但已弃用的标签。【参考方案7】：

将表格居中对齐。

<table  border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center">
            Your Content
        </td>
    </tr>
</table>

如果是表格，则在您拥有“您的内容”的地方，将其设置为所需的宽度，您将获得居中的内容。

【讨论】：

是否有一个 CSS 属性可以做同样的事情？ text-align: center 没有做同样的事情。一些电子邮件提供商需要这种已弃用的对象居中方法。（我在考虑 Apple Mail）。当您为电子邮件布局编写代码时，您的代码就像是 1999 年一样。这会导致子表在 Outlook Web App (OWA) 中也以 tds 为中心，无论它们的对齐方式是否设置为 left。在 gmail 手机中不起作用。然而，下面的这个答案确实***.com/a/38149673/129638【参考方案8】：

电子邮件中的 CSS 很痛苦。不幸的是，您可能需要表格，因为并非所有电子邮件客户端都支持 CSS。

也就是说，使用 HTML 过渡 DOCTYPE，而不是 XHTML，并使用 <center>。

【讨论】：

以上是关于在CSS中居中的代码是啥的主要内容，如果未能解决你的问题，请参考以下文章