如何将文本放在div中间并使用margin auto定位div？

Question

我正在尝试在框中间的div内移动文本，我需要在页面中间移动div框。

#move {
  border: 4px solid black;
  display: inline-block;
  width: 400px;
  text-align: center;
  height: 200px;
}

<div id="move">Move Me Center</div>

Answer 1

1. ：添加margin:auto以使div成为中心
2. ：添加与div的高度line-height:200px;
相同的行高
＆＃13;
＆＃13;
#move {
  border: 4px solid black;
  width: 400px;
  text-align: center;
  height: 200px;
  margin:auto;
  line-height:200px
}
＆＃13;
<div id="move">Move Me Center</div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

除了使用line-height之外，您还可以围绕文字创建span并应用transform:translateY(50%)并在{margin:auto中将inline-block更改为block 1}}

＆＃13;

＆＃13;

#move

＆＃13;

#move {
  border: 4px solid black;
  display: block;
  width: 400px;
  text-align: center;
  height: 200px;
  margin:auto
}
#move span {
  transform: translateY(50%);
  display:block;
  height:100%
}

＆＃13;

＆＃13;

＆＃13;

Answer 3

使line-height与div的高度相同：line-height:200px;

Answer 4

如果您的用户大多使用现代浏览器，则可以始终使用flexbox作为解决方案。

克里斯在CSS-Tricks上有一个很棒的flexbox指南，here。

实施例

Codepen Example

HTML

<div class="flex-container">
<div class="move">
  <p>Move me center</p>
</div>
</div>

CSS

.flex-container { 
  display: flex; 
  flex-direction: row; /* Change to columns for vertical axis */ 
  flex-wrap: wrap; 
  justify-content: center; 
  align-items: center;
  height: 100vh; 
  width: 100vw; 
}

.move { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  height: 200px; 
  width: 400px; 
  border: 1px solid red; 
}