Html 如何垂直居中div列中的第二个子项_Html_Css_Flexbox

Html 如何垂直居中div列中的第二个子项

html css

Html 如何垂直居中div列中的第二个子项,html,css,flexbox,Html,Css,Flexbox,因此，在父div中有两个元素。我希望第一个元素位于父div的最顶端，第二个元素始终保持在div的垂直中心。如下图所示：我尝试过使用更多只占屏幕一定百分比的父div将第二个div居中，但是随着屏幕大小的改变，中心菜单会从屏幕中心移开。我尝试过制作另一个黑盒div，并将其分层，然后以这种方式将菜单垂直居中。我无法让它工作这是我现在手头的一把小提琴-- 这是html- <html> <head> <link rel="stylesheet" href="st

因此，在父div中有两个元素。我希望第一个元素位于父div的最顶端，第二个元素始终保持在div的垂直中心。如下图所示：

我尝试过使用更多只占屏幕一定百分比的父div将第二个div居中，但是随着屏幕大小的改变，中心菜单会从屏幕中心移开。我尝试过制作另一个黑盒div，并将其分层，然后以这种方式将菜单垂直居中。我无法让它工作

这是我现在手头的一把小提琴--

这是html-

<html>
<head>
    <link rel="stylesheet" href="styles.css">
<meta charset="utf-8">
<title>home</title>
</head>
<div data-viewport-height="100" class = "main">

    <div class="bgImage">
        <div class="blocks" id="topBlock"></div>
        <div class="blocks" id="bottomBlock"></div>
        <div id="mainContent">

            <div id="blackWrapper">
                    <h1>Cristiano Firmani</h1>
                    <nav class="main-nav">
                        <ul>
                            <li><a  href="#about">ABOUT</a></li>
                            <li><a  href="#software">SOFTWARE</a></li>
                            <li><a  href="#photography">PHOTOGRAPHY</a></li>
                            <li><a  href="#youtube">YOUTUBE</a></li>
                            <li><a  href="#contact">CONTACT</a></li>
                            <li><a  href="#support">SHOP</a></li>
                        </ul>
                    </nav>

            </div>
        </div>

    </div>

</div>
<body>
</body>
</html>

如果您将

h1

位置设置为绝对位置

，则可以将链接保持在页面的中心位置。只需将

h1

CSS设置为：

h1 {
  font-family: 'Consuela Script';
  font-size:56px;
  color:#3FBAC2;
  margin:0;
  padding:0;
  /* <added> */
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  /* </added> */
}

h1{
字体系列：“Consuela脚本”；
字体大小：56px；
颜色：#3FBAC2；
保证金：0；
填充：0；
/*
有几种方法，这取决于您是否想让它在Internet Explorer 11上工作
绝对位置：
让它们成为两个flex项目，顶部和底部，第一个大约0.8个单位高，第二个1.2个单位高：让flexbox为您展开它们
在底部添加一个额外的div
或h1
，现在，告诉flexbox尽可能垂直地展开顶部和底部的flex项（使用flex:10 auto
），不要展开中间的flex项（使用flex:0 auto
），现在您的链接位于页面中央：
第三种方法在IE 11上效果最好。请注意，在我的Mac电脑上，56px字体非常大，所以我将其改为26px
                  <nav class="main-nav">
                    <ul>
                        <li><a  href="#about">ABOUT</a></li>
                        <li><a  href="#software">SOFTWARE</a></li>
                        <li><a  href="#photography">PHOTOGRAPHY</a></li>
                        <li><a  href="#youtube">YOUTUBE</a></li>
                        <li><a  href="#contact">CONTACT</a></li>
                        <li><a  href="#support">SHOP</a></li>
                    </ul>
                </nav>

对齐条目：中心；并对齐内容：中心；也可以用来居中。但是显示必须是弯曲的，这样你就可以看到变化。你可以在长期接受的答案中找到你的用例。
                  <nav class="main-nav">
                    <ul>
                        <li><a  href="#about">ABOUT</a></li>
                        <li><a  href="#software">SOFTWARE</a></li>
                        <li><a  href="#photography">PHOTOGRAPHY</a></li>
                        <li><a  href="#youtube">YOUTUBE</a></li>
                        <li><a  href="#contact">CONTACT</a></li>
                        <li><a  href="#support">SHOP</a></li>
                    </ul>
                </nav>

li {
   display: flex;
   flex-direction: column;
 }