我有一个div设置为display:block（90px height和width），我有一些文字里。
我需要文本在垂直和水平方向的中心对齐。
我已经尝试过了text-align:center，但是它没有做水平部分，所以我尝试了vertical-align:middle，但是没有用。
有任何想法吗？
div块内的CSS中心文本（水平和垂直）
第1679篇《div块内的CSS中心文本（水平和垂直）》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共22个回答
Try the following example. I have added examples for each category: horizontal and vertical
<!DOCTYPE html>
<html>
<head>
<style>
#horizontal
{
text-align: center;
}
#vertical
{
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
</style>
</head>
<body>
<div id ="horizontal">Center horizontal text</div>
<div id ="vertical">Center vertical text</div>
</body>
</html>
Really simple code that works for me! Just one line and your text will be centered horizontally.
.center-horizontally{
justify-content: center;
}
<Card.Footer className="card-body-padding center-horizontally">
<label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>
The output looks like this:
Please vote this answer if it works for just to spare some time of devs looking for easy solutions. Thanks! :)
This worked for me:
.center-stuff{
text-align: center;
vertical-align: middle;
line-height: 230px; /* This should be the div height */
}
For me this was the best solution:
HTML:
<div id="outer">
<img src="logo.png">
</div>
CSS:
#outer {
position: fixed;
top: 50%;
left: 50%;
/* bring your own prefixes */
transform: translate(-50%, -50%);
}
Adjusting line height to get the vertical alignment.
line-height: 90px;
This should be the right answer. Cleanest and simplest:
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
Apply style:
position: absolute;
top: 50%;
left: 0;
right: 0;
Your text would be centered irrespective of its length.
You can try the following methods:
If you have a single word or one line sentence, then the following code can do the trick.
Have a text inside a div tag and give it an id. Define the following properties for that id.
id-name { height: 90px; line-height: 90px; text-align: center; border: 2px dashed red; }Note: Make sure the line-height property is same as the height of the division.
But, if the content is more than one single word or a line then this doesn’t work. Also, there will be times when you cannot specify the size of a division in px or % (when the division is really small and you want the content to be exactly in the middle).
To solve this issue, we can try the following combination of properties.
id-name { display: flex; justify-content: center; align-items: center; border: 2px dashed red; }These 3 lines of code sets the content exactly in the middle of a division (irrespective of the size of the display). The "align-items: center" helps in vertical centering while "justify-content: center" will make it horizontally centered.
Note: Flex does not work in all browsers. Make sure you add appropriate vendor prefixes for additional browser support.
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}<div>
Hello, World!!
</div><!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>
This works for me (tested OK!):
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 */
}
You can choose other values than 50%. For example, 25% to center at 25% of parent.
.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># 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
}
<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>
方法1
div {
height: 90px;
line-height: 90px;
text-align: center;
border: 2px dashed #f69c55;
}<div>
Hello, World!!
</div>方法2
div {
height: 200px;
line-height: 200px;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: inline-block;
vertical-align: middle;
line-height: normal;
}<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>方法3
div {
display: table;
height: 100px;
width: 100%;
text-align: center;
border: 2px dashed #f69c55;
}
span {
display: table-cell;
vertical-align: middle;
}<div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>将此CSS类提供给目标<div>：
.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>您可以flex在父 项上使用该属性，div并将该margin:auto属性添加到子项中：
.parent {
display: flex;
/* You can change this to `row` if you want the items side by side instead of stacked */
flex-direction: column;
}
/* Change the `p` tag to what your items child items are */
.parent p {
margin: auto;
}
您可以在flex此处查看更多选项：https : //css-tricks.com/snippets/css/a-guide-to-flexbox/
您可以为此尝试非常简单的代码：
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>Codepen链接：http：//codepen.io/santoshkhalse/pen/xRmZwr
将行添加display: table-cell;到该div的CSS内容中。
仅表单元格支持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/
使用flexbox / CSS：
<div class="box">
<p>അ</p>
</div>
CSS：
.box{
display: flex;
justify-content: center;
align-items: center;
}
相似问题
问题类别