CSS中心文本（水平和垂直）在一个div块内
我有一个div集display:block 。 （ 90px height和width ），我有一些文字里面。
我需要将文本垂直和水平alignment在中心。
我已经尝试了text-align:center ，但它不做水平部分，所以我尝试了vertical-align:middle但它没有工作。
有任何想法吗？
如果它是一行文字和/或图像，那么很容易做到。 只是使用
text-align: center; vertical-align: middle; line-height: 90px; /* the same as your div height */
而已。 如果它可以是多行，那么它更复杂一些。 但http://pmob.co.uk上有解决scheme。寻找“垂直alignment”。;
因为他们往往是黑客或添加复杂的divs …我通常使用一个单一的单元格表来做到这一点…尽可能简单。
2016/2017年更新：
它可以更常用于transform ，即使在IE10和IE11等较旧的浏览器中也可以正常运行。 它可以支持多行文字：
position: relative; top: 50%; transform: translateY(-50%);
例如： https ： //jsfiddle.net/wb8u02kL/1/
收缩包裹宽度：
上面的解决scheme使用固定宽度的内容区域。 要使用收缩包装宽度，请使用
position: relative; float: left; top: 50%; left: 50%; transform: translate(-50%, -50%);
例如： https ： //jsfiddle.net/wb8u02kL/2/
我试过flexbox，但是它没有得到广泛的支持，因为它会在IE10的一些老版本的IE中崩溃。
截至2014年的常用技术：
-
方法1 –
transformtranslateX/translateY：示例在这里 / 全屏幕示例
在受支持的浏览器 （大部分）中，可以使用
top: 50%/left: 50%与translateX(-50%) translateY(-50%)结合dynamic垂直/水平居中元素。.container { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); }
-
方法2 – Flexbox方法：
示例在这里 / 全屏幕示例
在受支持的浏览器中 ，将目标元素的
display设置为flex并使用align-items: centerfor vertical centering和justify-content: centerfor horizontal centering。 不要忘记添加供应商前缀以获得更多浏览器支持（ 请参阅示例 ）。html, body, .container { height: 100%; } .container { display: flex; align-items: center; justify-content: center; }
-
方法3 –
table-cell/vertical-align: middle：示例在这里 / 全屏幕示例
在某些情况下，您需要确保
html/body元素的高度设置为100%。对于垂直alignment，将父元素的
width/height为100%并添加display: table。 然后为子元素，将display更改为table-cell并添加vertical-align: middle。对于水平居中，您可以添加
text-align: center来居中文本和任何其他inline子元素。 或者，您可以使用margin: 0 auto假定元素是block级别。html, body { height: 100%; } .parent { width: 100%; height: 100%; display: table; text-align: center; } .parent > .child { display: table-cell; vertical-align: middle; }
-
方法4 – 绝对定位
50%从顶部排水量：示例在这里 / 全屏幕示例
这种方法假设文本有一个已知的高度 – 在这个例子中是
18px。 相对于父元素，只要将元素从顶部绝对定位50%即可。 使用元素已知高度的一半的负margin-top值，在这种情况下为-9px。html, body, .container { height: 100%; } .container { position: relative; text-align: center; } .container > p { position: absolute; top: 50%; left: 0; right: 0; margin-top: -9px; }
-
方法5 –
line-height方法（最不灵活 – 不build议）：示例在这里
在某些情况下，父元素将有一个固定的高度。 对于垂直居中，您所要做的就是在子元素上设置一个等于父元素固定高度的
line-height值。虽然这个解决scheme在某些情况下会起作用，但是值得注意的是，当有多行文本时，这种方法是行不通的。
.parent { height: 200px; width: 400px; text-align: center; } .parent > .child { line-height: 200px; }
方法4和5不是最可靠的。 去第一个3。
使用flexbox / CSS：
<div class="box"> <p>അ</p> </div>
CSS：
.box{ display: flex; justify-content: center; align-items: center; }
从快速提示中获取：垂直和水平居中元素的最简单方法
添加行display: table-cell; 到你的css那个div。 只有表格单元格支持vertical-align：middle; 但是你可以把这个[table-cell]定义给div
在这里生活的例子： http : //jsfiddle.net/tH2cc/
div{ height:90px; width:90px; text-align:center; border:1px solid silver; display: table-cell; // this says treat this element like a table cell vertical-align:middle; //now we can center vertically like in a TD }
我总是使用下面的CSS作为容器，以横向和纵向为中心。
display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center;
在这里看到它的行动： https : //jsfiddle.net/yp1gusn7/
你可以尝试非常简单的代码
display:flex; align-items: center; justify-content:center;
.box{ height:90px; width:90px; background:green; display:flex; align-items: center; justify-content:center; }
<div class="box"> Lorem </div>
<div class="small-container"> <span>Text centered</span> </div> <style> .small-container { width:250px; height:250px; border:1px green solid; text-align:center; position: absolute; top: 50%; left: 50%; -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .small-container span{ position: absolute; top: 50%; left: 50%; -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } </style>
#parent { display:table; } #child { display:table-cell; width:100%; //as large as its parent to center the text horizontally text-align: center; vertical-align:middle;//vertically align this element on its parent }
给这个CSS类的目标
.centered { width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; text-align: center; background: red; /* not necessary just to see the result clearly */ }
<div class="centered">This text is centered horizontally and vertically</div>
调整行高以获得垂直alignment。
line-height: 90px;
这适用于我（testing好！）
HTML：
<div class="mydiv"> <p>Item to be Centered!</p> </div>
CSS：
.mydiv { height: 100%; /* or other */ position: relative; } .mydiv p { margin: 0; position: absolute; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); /* to compensate own width and height */ }
你可以select其他的值，然后50％fi。 25％以家长的25％为中心
<!DOCTYPE html> <html> <head> <style> .container{ height:450px; background:#f8f8f8; display: -ms-flexbox; display: -webkit-flex; display: flex; -ms-flex-align: center; align-items: center; -webkit-box-align: center; justify-content: center; width: 100%; } p{ font-size:24px;} </style> </head> <body> <div class="container"> <p>hello world</p> </div> </body> </html>
<!DOCTYPE html> <html> <head> <style> .maindiv{ height:450px; background:#f8f8f8; display: -webkit-flex; align-items: center; justify-content: center; } p{ font-size:24px;} </style> </head> <body> <div class="maindiv"> <h1>Title</h1> </div> </body> </html>
你可以尝试下面的方法：
1.如果你有一个单词或一行句子，那么下面的代码可以做到这一点。
在div标签中有一个文本，并给它一个id。 为该ID定义以下属性。
id-name { height: 90px; line-height: 90px; text-align: center; border: 2px dashed red; }
注意：确保行高属性与分区的高度相同。
图片
但是，如果内容不止一个单词或一行，那么这是行不通的。 另外，有时候你不能以px或者％来指定divison的大小（当divison真的很小，并且你想要的内容恰好在中间时）
2.要解决这个问题，我们可以尝试下面的属性组合。
id-name { display: flex; justify-content: center; align-items: center; border: 2px dashed red; }
图片
这三行代码将内容正好设置在分区的中间（不考虑显示的大小）。 “align-items：center”有助于垂直居中，而“justify-content：center”将使其居中居中。
注意： Flex在所有浏览器中都不起作用。 确保您添加适当的供应商前缀以获得更多的浏览器支持。
应用风格：
position: absolute; top: 50%; left: 0; right: 0;
您的文本将被集中，无论其长度。
方法1
div { height: 90px; line-height: 90px; text-align: center; border: 2px dashed #f69c55; }
<div> Hello World! </div>
.cell-row {display: table; width: 100%; height: 100px; background-color: lightgrey; text-align: center} .cell {display: table-cell} .cell-middle {vertical-align: middle}
<div class="cell-row"> <div class="cell cell-middle">Center</div> </div>
这应该是正确的答案。 最干净最简单：
.element { position: relative; top: 50%; transform: translateY(-50%); }
footer { width: 100%; height: 80px; position: absolute; bottom: 0; left: 0; }
