如何将HTML元素垂直居中对齐？

Question

HTML：

<th class="someCSS">Text</th>

CSS：

.someCSS {
    vertical-align: middle;
}

该代码不起作用。 它不会将元素垂直居中对齐。 我怎么做？

Answer 1

在这种情况下，我认为您必须使用flexbox，因为您的文本可以是一个字或500个字，并且始终会停留在页面中间

您将div放在文本周围，然后执行我发布的操作

 body{ margin:0px; } .test{ display:flex; /*justify-content:center;*//*to put in the center of the screen*/ align-items:center; width:100%; height:100vh; }

 <div class="test"> <th class="someCSS">Text</th> </div>

Answer 2

您可以使用css calc()函数算出包含元素的中心点，然后减去要居中元素的高度的一半。

.container {
  height: 100vh;
}
.element-to-align{
  position: relative;
  top: calc(50% - 50px);
  height:100px;
  width: 100px;
}



<body>
 <div class="container">
  <div class="element-to-align"></div>
 </div> 
</body>

完整代码如下：

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
 .container {
   height: 100vh;
 }
 .element-to-align{
   position: relative;
   top: calc(50% - 50px);
   height:100px;
   width: 100px;
   border: red dotted 1px;
 }
</style>
</head>
<body>
 <div class="container">
   <div class="element-to-align"></div>
 </div> 
</body>
</html>

Answer 3

<style>
        #txt{
            vertical-align: middle;
            height: 190px;
        }
</style>


    <table border="1">
        <tr>
            <th id="txt">Some Text</th>
        </tr>
    </table>

如何将HTML元素垂直居中对齐？

问题描述

3 个解决方案

解决方案1
0 2016-04-10 18:38:46

解决方案2
0 2016-04-10 18:39:26

解决方案3
0 2016-04-10 20:24:31

如何将HTML元素垂直居中对齐？

问题描述

3 个解决方案

解决方案1 0 2016-04-10 18:38:46

解决方案2 0 2016-04-10 18:39:26

解决方案3 0 2016-04-10 20:24:31

解决方案1
0 2016-04-10 18:38:46

解决方案2
0 2016-04-10 18:39:26

解决方案3
0 2016-04-10 20:24:31