如何水平和垂直居中元素

Question

我试图将选项卡内容垂直居中，但当我添加CSS样式时显示：内联-灵活，水平文本对齐消失。

如何使每个选项卡的文本对齐x和y？

*{方框大小：border-box；}#left框架{背景色：绿色；位置：绝对；左：0；右：60%；顶部：0；底部：0；}#leftFrame#选项卡{背景色：红色；位置：绝对；顶部：0；左：0；右：0；身高：25%；}#leftFrame#标签div{边框：2px纯黑色；位置：静态；浮动：左；宽度：50%；高度：100%；文本对齐：居中；显示：内联flex；对齐项目：居中；}

<div id=leftFrame><div id=选项卡><div>第一个</div><div>秒</div></div></div>

Answer 1

CSS flexbox/网格方法：

此处为示例/全屏示例

在支持的浏览器，设置显示目标元素的弯曲和使用对齐项目：居中用于垂直定心和justify-content：中心用于水平居中。请记住，父容器也需要高度（在这种情况下，为100%）。

html、正文、容器{高度：100%；}.容器{显示：flex；对齐项目：居中；justify-content：中心；}

<div class=“container”><span>我垂直/水平居中</span></div>

---

转型 平移X/平移Y方法：

此处为示例/全屏示例

在支持的浏览器（大多数），您可以使用顶部：50%/左：50%与translateX（-50%）translateY（-50%）动态垂直/水平居中元素。

.容器{位置：绝对；最高：50%；左：50%；转换：translateX（-50%）translateY（-50%）；}

<div class=“container”><span>我垂直/水平居中</span></div>

---

表格单元格/垂直对齐：中间方法：

此处为示例/全屏示例

在某些情况下，您需要确保html格式/身体元素的高度设置为100%.

对于垂直对齐，请设置父元素的宽度/高度到100%并添加显示：表格。然后，对于子元素，将显示到表细胞并添加垂直对齐：中间.

对于水平居中，您可以添加文本对齐：居中使文本居中内联子元素。或者，您可以使用边距：0自动，假设元素为块级别。

html，正文{高度：100%；}.父级{宽度：100%；高度：100%；显示：表格；文本对齐：居中；}.parent>.child{显示：table-cell；垂直对齐：中间；}

<section class=“parent”><div class=“child”>我垂直/水平居中</div（分频）></节>

---

绝对定位50%用位移法从顶部测量：

此处为示例/全屏示例

这种方法假设文本具有已知的高度——在这种情况下，18像素.只需绝对定位元件50%从顶部开始，相对于父元素。使用负片边缘顶部该值是元素已知高度的一半，在本例中--9像素.

html、正文、容器{高度：100%；}.容器{位置：相对；文本对齐：居中；}容器>p{位置：绝对；最高：50%；左：0；右：0；边缘顶部：-9px；}

<div class=“container”><p>我垂直/水平居中</p>（第页）</div>

---

这个线路高度方法（最不灵活-不建议）：

此处为示例

在某些情况下，父图元的高度是固定的。对于垂直定心，您只需设置一个线路高度子元素上的值等于父元素的固定高度。

尽管此解决方案在某些情况下可行，但值得注意的是，当存在多行文本时，它将不起作用-这样地.

.父级{高度：200px；宽度：400px；背景：浅灰色；文本对齐：居中；}.parent>.child{线高：200px；}

<div class=“parent”><span class=“child”>我垂直/水平居中</span></div>

Answer 2

如果CSS3是一个选项（或您有备用），您可以使用转换：

.中心{右：50%；底部：50%；转换：转换（50%，50%）；位置：绝对；}

与上面的第一种方法不同，您不希望在负翻译中使用left:50%，因为IE9+中存在溢出错误。使用一个正值，您将看不到水平滚动条。

Answer 3

下面是如何使用两个简单的flexbox属性来居中n个两个轴上的div：

• 设置容器的高度：在这里，主体被设置为至少100个视口高度。
• 对齐项目：居中；如果弯曲方向为行，则将垂直居中块；如果弯曲方向是列，则将水平居中块
• justify-content:空间-圆形；如果flex direction是row，那么将垂直分布可用空间；如果flex方向是div元素周围的列，那么将水平分布可用空间

车身{最小高度：100vh；显示：flex；对齐项目：居中；justify-content:空间-圆形；}

<div>foo<div>巴</div>

Answer 4

垂直和水平居中盒子的最佳方法是使用两个容器：

外容器：

• 应该有显示：表格；

内部容器：

• 应该有显示：table-cell；
• 应该有垂直对齐：中间；
• 应该有文本对齐：居中；

内容框：

• 应该有显示：嵌入式块；
• 应该调整水平文本对齐方式，除非您希望文本居中

演示：

车身{边距：0；}.外部容器{显示：表格；宽度：80%；高度：120px；背景：#ccc；}.内部控制器{显示：table-cell；垂直对齐：中间；文本对齐：居中；}.中心内容{显示：嵌入式块；文本对齐：左；背景：#fff；填充：20px；边框：1px实心#000；}

<div class=“outer-container”><div class=“inner-container”><div class=“centered-content”>居中！</div></div></div>

另请参见这个小提琴!

页面中间居中：

要将内容放在页面中间，请将以下内容添加到外部容器中：

• 位置：绝对；
• 宽度：100%；
• 高度：100%；

这里有一个演示：

车身{边距：0；}.外部容器{位置：绝对；显示：表格；宽度：100%；高度：100%；背景：#ccc；}.内部控制器{显示：table-cell；垂直对齐：中间；文本对齐：居中；}.中心内容{显示：嵌入式块；文本对齐：左；背景：#fff；填充：20px；边框：1px实心#000；}

<div class=“outer-container”><div class=“inner-container”><div class=“centered-content”>居中！</div></div></div>

另请参见这个小提琴!

Answer 5

CSS网格：place-items

最后，我们有place-items：中心让CSS网格变得更容易。

HTML格式

<div class=“parent”><div class=“到中心”></div>

CSS公司

.父级{显示：网格；place-items：中心；}

输出：

html中，车身{高度：100%；}.容器{显示：网格；place-items：中心；高度：100%；}.中心{背景：#5F85DB；颜色：#fff；font-weight：粗体；font-family：宋体；填充：10px；}

<div class=“container”><div class=“center”contenteditable>我总是以父母为中心</div>

Answer 6

运行此代码段并查看垂直和水平对齐的div。

html中，车身，.容器{高度：100%；宽度：100%；}.容器{显示：flex；对齐项目：居中；justify-content：中心；}.mydiv文件{宽度：80px；}

<div class=“container”><div class=“mydiv”>h&v对齐</div></div>

Answer 7

.对齐{显示：flex；宽度：400px；高度：400px；边框：实心1px黑色；对齐项目：居中；justify-content:空间-圆形；}.align div：第一个子级{宽度：20px；高度：20px；背景色：红色；位置：绝对；}对齐div{宽度：20px；高度：20px；背景色：蓝色；}

<div class='align'><div><div><div><div><div><div></div>

第一个子对象将在中心垂直和水平对齐

Answer 8

来源链接

方法1）显示类型flex

.子元素{显示：flex；justify-content：中心；对齐项目：居中；}

方法2）2D变换

.子元素{最高：50%；左：50%；转换：转换（-50%，-50%）；位置：绝对；}

参见其他方法在这里

Answer 9

将Div置于页面中央检查提琴连杆

#甚高频{边距：15px；方框阴影：0 0 8px rgba（0，0，0和0.4）；填充：25px；宽度：200px；高度：200px；背景：白色；文本对齐：居中；边距：自动；位置：绝对；顶部：0；左：0；底部：0；右：0；}

要垂直对齐的div

更新另一种选择是使用弹性盒检查提琴连杆

.vh码{背景色：#ddd；高度：200px；对齐项目：居中；显示：flex；}.vh>目录{宽度：100%；文本对齐：居中；垂直对齐：中间；}

<div class=“vh”>要垂直对齐的div</div>

Answer 10

下面是获得所需结果的Flex-box方法

<!DOCTYPE html><html><头部><元字符集=“utf-8”><meta name=“viewport”content=“width=设备宽度”><title>Flex-box方法<样式>.tabs选项卡{显示：-webkit-flex；显示：flex；宽度：500px；高度：250px；背景色：灰色；边距：0自动；}.f型{宽度：200px；高度：200px；边距：20px；背景色：黄色；边距：0自动；显示：内联/*用于垂直对齐*/顶部：9%/*用于垂直对齐*/位置：相对/*用于垂直对齐*/}</style></头><body><div class=“tabs”>第一个<div class=“f”>秒</div></div></body></html>

Answer 11

另一种方法是使用表格：

<div style=“border:2px solid#8AC007；height:200px；width:200px；”><table style=“宽度：100%；高度：100%”><tr style=“height:100%”><td style=“height:100%；text-align:center”>你好，这里有多行，这很长，太棒了，哥们</td></tr></表格></div>

Answer 12

网格css方法

#包装器{位置：绝对；顶部：0；底部：0；右：0；左：0；显示：网格；网格模板列：重复（3，1fr）；网格模板：重复（3，1fr）；}.main接口{背景色：#444；}

<div id=“wrapper”><div class=“box”></div><div class=“box”></div><div class=“box”></div><div class=“box”></div><div class=“box main”></div></div>

Answer 13

需要遵循以下内容新建和简单的解决方案：

居中类{对齐项目：居中；显示：flex；justify-content：中心；宽度：100vw；高度：100vh；}

<div class=“centered-class”>我在垂直和水平的中心。</div>

Answer 14

对我来说，最简单、最干净的解决方案是使用CSS3属性“transform”：

.容器{位置：相对；}.容器a{位置：绝对；最高：50%；转换：转换（0，-50%）；}

<div class=“container”>你好，世界</a></div>

Answer 15

为了使元素垂直和水平居中，我们还可以使用下面提到的属性。

此CSS属性对齐-项目垂直并接受以下值：

柔性起动：项目与容器顶部对齐。

柔性发动机：项目与容器底部对齐。

中心：项目在容器的垂直中心对齐。

基线：项目显示在容器的基线处。

伸展：拉伸物品以适合容器。

此CSS属性正当内容，它水平对齐项目并接受以下值：

柔性起动：项目与容器的左侧对齐。

柔性发动机：项目与容器的右侧对齐。

中心：项目在容器中心对齐。

间隔层：项目之间的间距相等。

空间-圆形：项目周围以相等间距显示。

Answer 16

只需将顶部、底部、左侧和右侧设置为0。

<html><头部><样式><div>{位置：绝对；边距：自动；背景颜色：浅蓝色；宽度：100px；高度：100px；填充：25px；顶部：0；右：0；底部：0；左：0；}</style></头><body>我在中间</body></html>

Answer 17

您可以使用CSS（您的元素显示：内嵌网格+网格自动流动：行；)栅格和柔体（父元素显示：flex；),

请参阅下面的片段

#left框架{显示：flex；高度：100vh；宽度：100%；}#选项卡{显示：内嵌网格；网格自动流动：行；网格地图：24px；justify-items：中心；边距：自动；}html，正文{边距：0；填充：0；}

<div><div id=leftFrame><div id=tabs><div>第一个</div><div>秒</div></div></div></div>

Answer 18

这应该行得通

.center分隔符{显示：flex；弯曲方向：立柱；justify-content：中心；对齐项目：居中；文本对齐：居中；最小高度：100vh；}

中心刻度

Answer 19

如果你喜欢没有flexbox、网格、表格或垂直对齐：中间；

您可以做到：

HTML格式

<div class=“box”><h2 class=“box__label”>方形</h2></div>

CSS公司

.box文件{盒大小：border-box；宽度：100px；高度：100px；文本对齐：居中；边框：1px纯黑色；}.box__label{盒大小：border-box；显示：嵌入式块；转换：translateY（50%）；文本对齐：居中；边框：1px纯黑色；}

Answer 20

如果是的话仅关于文本对齐这很简单。只需使用此选项：

垂直对齐：中间；/*垂直定心*/文本对齐：居中；/*水平定心*/

不需要父样式。

在某些情况下，当父对象具有某些样式属性时，它可能会影响子对象，而这将无法正常工作.

Answer 21

• 方法6

/*将单位更改为“%”、“px”或其他值*/#包装器{宽度：50%；高度：70vh；背景：rgba（0,0,0，.5）；位置：绝对；顶部：0；右：0；底部：0；左：0；边距：自动；}#左{宽度：50%；高度：50vh；位置：绝对；顶部：0；底部：0；左：0；边距：自动；背景：红色；}#右{宽度：50%；高度：50vh；位置：绝对；顶部：0；底部：0；右：0；边距：自动；背景：绿色；}.txt文件{文本对齐：居中；线路高度：50vh；}

<div id=“wrapper”>左侧<div id=“right”class=“txt”>右</div>

.容器｛宽度：50%//此处为您的集装箱宽度身高：50%//您的集装箱高度位置：绝对；顶部：0；右：0；底部：0；左：0；边距：自动；}

Answer 22

垂直和水平居中div的最简单方法如下：

<div style=“display:table；width:200px；height:200px；border:1px纯黑；”><div style=“display:table-cell；vertical-align:middle；text-align:center；”>此处显示文本</div></div>

再举一个例子:

.父级{显示：表格；宽度：100%；高度：100%；}.child（儿童）{显示：table-cell；垂直对齐：中间；文本对齐：居中；}<div class=“parent”><div class=“child”><h4><u>在孟加拉飞行保护区服役<br>和<br>国防服务重装令</u></div></div>

Answer 23

我认为这是最短最简单的方法。然而，它取决于元素的宽度和高度。因此，您可以自由调整上的更多百分比翻译（50%，50%）；.

.div容器{位置：绝对；顶部：0；左：0；右：0；底部：0；转换：转换（50%，50%）；}

<div class=“divContainer”>我居中

Answer 24

为不愿意使用flex或grid的副本添加答案@不使用Flexbox或Grid在CSS中居中元素

这里有一种在IE5中已经有效的方法。。。更新到现在的浏览器（使用伪+vh单元）

车身{边距：0；文本对齐：居中；/*你看我*/背景：线性渐变（到顶部，rgba（0，0，0.2）50%，透明50%），线性渐变（向右，rgba；}正文：：之前，div公司{显示：嵌入式块；垂直对齐：中间；}div公司{边界：实体；填充：1em；}正文：之前{内容：“”；高度：100vh；}

<div>通过伪、内联块和垂直对齐将我居中

Answer 25

最简单的柔性接线盒方法：

如何将a居中的最简单方法单个元件垂直和水平是使其成为一个灵活项目，并将其边距设置为汽车:

如果将自动边距应用于灵活项目，该项目将自动扩展其指定边距以占用flex中的额外空间容器。。。

.柔性控制器{高度：150px；显示：flex；}.柔性杆{边距：自动；}

<div class=“flex-container”><div class=“flex-item”>这应该居中！</div></div>

每个方向上的边距扩展将推元素正好位于其容器的中间。

Answer 26

在我试图垂直对齐内部文本内容的情况下按钮：：之前和按钮：：之后，我可以使用垂直对齐：文本顶部.

按钮：：之后{垂直对齐：文本顶部；}

Answer 27

我使用此CSS代码：

显示：网格；justify-content：中心；对齐项目：居中；

来源是CSS技巧

Answer 28

这是人们在搜索时可能会遇到的一个相关问题：当我想将一个div放在“waiting..”100px方形动画gif的中央时，我使用：

.centreDiv（中心分区）{位置：绝对；顶部：-moz-calc（50vh-50px）；顶部：-webkit-calc（50vh-50px）；顶部：计算（50vh-50px）；左：-moz-calc（50vw-50px）；左图：-webkit-calc（50vw-50px）；左：计算（50vw-50px）；z指数：1000；/*需要什么*/}