我有一个div设置显示:块(90px高和宽)，我有一些文本在里面。
我需要文本在中心垂直和水平对齐。
我已经尝试了text-align:center，但它不做垂直居中部分，所以我尝试了vertical-align:middle，但它不起作用。
什么好主意吗?
当前回答
这是非常简单的代码，为我工作!它只有一行，你的文本将水平居中。
.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>
输出如下所示:
其他回答
使用flexbox / CSS:
<div class="box">
<p>അ</p>
</div>
CSS:
.box{
display: flex;
justify-content: center;
align-items: center;
}
摘自《快速提示:垂直和水平居中元素的最简单方法》
这是非常简单的代码，为我工作!它只有一行，你的文本将水平居中。
.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>
输出如下所示:
<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>
div { 身高:90 px; 行高:90 px; text-align:中心; 边界:2px虚线#f69c55; } < div > 你好,世界! ! < / 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>
