javascript - 在 div 的中心位置 p

我在 div#leftPosText 元素(图片下方的黑色元素)内放置了一个 -90° 的 p#rot。我希望“嗨”文本在垂直和水平方向上居中。我发现了与我重复的类似问题，但无论如何我都没有找到解决方案。

这是有问题的代码:

    div#leftPosText{
 position:absolute;
padding:2vh;
 background-color:black;
width:20vw;
height:50vh;
font-size:calc(5vh + 5vw);

text-align:center;
vertical-align:middle;
}
p#rot{

transform:rotate(-90deg);
color:white;
 text-align:center; 
 position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0; 
}

这是完整的片段(我没有包含图片):

const maxFiles = 159;
const randomEl = document.getElementById("random");
function randombg() {
  var random = Math.floor(Math.random() * maxFiles)+1;
  randomEl.style.backgroundImage = `url('images/(${random}).jpeg')`;

}
randombg();

*{
overflow-x:hidden;
    margin:0;
    padding:0;
    transition:1s;
	
}
 body,html{
     margin:0;
     padding:0;
}
 #random{
 
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
     left: 0;
     right: 0;
     bottom: 0;
     margin: auto;
     min-width: 100vw;
     height: 100vh;
     background-size:cover;
     background-repeat:no-repeat;
     background-position:center center;
     z-index:-2;
     font-size:calc(1vh + 1vw);
	 height:100vh;
}
 p#FrontText{
     font-size:calc(5vh + 5vw);
     opacity:1;
}
 div#headText{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color:white;
     opacity:0.6;
     border:1px solid white;
     padding:calc(1vh + 1vw);
     border-radius:0.1em;
     
	 box-shadow:0 0 25px white;
	  
}

 div#overlayStart{
 position:absolute;
 top:0;left;0;
 width:100vw;
 height:100vh;
 z-index:0;
 opacity:0.3;
     background: -webkit-linear-gradient(221deg, #a1c4fd, #c2e9fb, #cfd9df, #667eea, #764ba2, #e2d1c3, #89f7fe, #66a6ff, #48c6ef, #6f86d6, #feada6, #a3bded, #6991c7, #13547a, #80d0c7, #93a5cf, #434343, #000000, #93a5cf, #ff758c, #868f96, #596164, #c79081, #dfa579, #09203f, #96deda, #50c9c3, #29323c, #485563, #1e3c72, #2a5298, #b7f8db, #50a7c2, #2193b0, #6dd5ed);
     background: -o-linear-gradient(221deg, #a1c4fd, #c2e9fb, #cfd9df, #667eea, #764ba2, #e2d1c3, #89f7fe, #66a6ff, #48c6ef, #6f86d6, #feada6, #a3bded, #6991c7, #13547a, #80d0c7, #93a5cf, #434343, #000000, #93a5cf, #ff758c, #868f96, #596164, #c79081, #dfa579, #09203f, #96deda, #50c9c3, #29323c, #485563, #1e3c72, #2a5298, #b7f8db, #50a7c2, #2193b0, #6dd5ed);
     background: linear-gradient(229deg, #a1c4fd, #c2e9fb, #cfd9df, #667eea, #764ba2, #e2d1c3, #89f7fe, #66a6ff, #48c6ef, #6f86d6, #feada6, #a3bded, #6991c7, #13547a, #80d0c7, #93a5cf, #434343, #000000, #93a5cf, #ff758c, #868f96, #596164, #c79081, #dfa579, #09203f, #96deda, #50c9c3, #29323c, #485563, #1e3c72, #2a5298, #b7f8db, #50a7c2, #2193b0, #6dd5ed);
     -webkit-background-size: 7400% 7400%;
     background-size: 7400% 7400%;
     -webkit-animation: backgroundGardient 500s ease infinite;
     animation: backgroundGardient 200s ease infinite;
    

}
 @-webkit-keyframes backgroundGardient{
    0%{
        background-position: 0% 83%
    }
    50%{
        background-position: 100% 18%
    }
    100%{
        background-position: 0% 83%
    }
}
@keyframes backgroundGardient{
    0%{
        background-position: 0% 83%
    }
    50%{
        background-position: 100% 18%
    }
    100%{
        background-position: 0% 83%
    }
}
div#leftPosText{
 position:absolute;
padding:2vh;
 background-color:black;
width:20vw;
height:50vh;
font-size:calc(5vh + 5vw);

text-align:center;
vertical-align:middle;
}
p#rot{

transform:rotate(-90deg);
color:white;
 text-align:center; 
 position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0; 
}
div#mainTextOne{
 background-color: #ecf0f1;
 width:80vw;
 text-align:center;
 left:calc(20vw + 4vh);
 position:absolute;
}

<Doctype>
<html>
<meta charset='utf-8'>
<head>

</head>
<body>
<div id='random'>
</div>
<div id='overlayStart'></div>
<div id='headText'><p id='FrontText'>Hello!</p></div>
<div id='leftPosText'><p id='rot'>Hi</p></div>
<div id='mainTextOne'>hi</div>

</body>
</html>

最佳答案

如果您将旋转段落的父级 (div#leftPosText) 设置为 flex 容器并在其上设置对齐方式，则一切就绪。

const maxFiles = 159;
const randomEl = document.getElementById("random");
function randombg() {
  var random = Math.floor(Math.random() * maxFiles)+1;
  randomEl.style.backgroundImage = `url('images/(${random}).jpeg')`;

}
randombg();

*{
overflow-x:hidden;
    margin:0;
    padding:0;
    transition:1s;
	
}

 body,html{
     margin:0;
     padding:0;
}
 #random{
 
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
     left: 0;
     right: 0;
     bottom: 0;
     margin: auto;
     min-width: 100vw;
     height: 100vh;
     background-size:cover;
     background-repeat:no-repeat;
     background-position:center center;
     z-index:-2;
     font-size:calc(1vh + 1vw);
	 height:100vh;
}
 p#FrontText{
     font-size:calc(5vh + 5vw);
     opacity:1;
}
 div#headText{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     background-color:white;
     opacity:0.6;
     border:1px solid white;
     padding:calc(1vh + 1vw);
     border-radius:0.1em;
     
	 box-shadow:0 0 25px white;
	  
}

 div#overlayStart{
 position:absolute;
 top:0;left;0;
 width:100vw;
 height:100vh;
 z-index:0;
 opacity:0.3;
     background: -webkit-linear-gradient(221deg, #a1c4fd, #c2e9fb, #cfd9df, #667eea, #764ba2, #e2d1c3, #89f7fe, #66a6ff, #48c6ef, #6f86d6, #feada6, #a3bded, #6991c7, #13547a, #80d0c7, #93a5cf, #434343, #000000, #93a5cf, #ff758c, #868f96, #596164, #c79081, #dfa579, #09203f, #96deda, #50c9c3, #29323c, #485563, #1e3c72, #2a5298, #b7f8db, #50a7c2, #2193b0, #6dd5ed);
     background: -o-linear-gradient(221deg, #a1c4fd, #c2e9fb, #cfd9df, #667eea, #764ba2, #e2d1c3, #89f7fe, #66a6ff, #48c6ef, #6f86d6, #feada6, #a3bded, #6991c7, #13547a, #80d0c7, #93a5cf, #434343, #000000, #93a5cf, #ff758c, #868f96, #596164, #c79081, #dfa579, #09203f, #96deda, #50c9c3, #29323c, #485563, #1e3c72, #2a5298, #b7f8db, #50a7c2, #2193b0, #6dd5ed);
     background: linear-gradient(229deg, #a1c4fd, #c2e9fb, #cfd9df, #667eea, #764ba2, #e2d1c3, #89f7fe, #66a6ff, #48c6ef, #6f86d6, #feada6, #a3bded, #6991c7, #13547a, #80d0c7, #93a5cf, #434343, #000000, #93a5cf, #ff758c, #868f96, #596164, #c79081, #dfa579, #09203f, #96deda, #50c9c3, #29323c, #485563, #1e3c72, #2a5298, #b7f8db, #50a7c2, #2193b0, #6dd5ed);
     -webkit-background-size: 7400% 7400%;
     background-size: 7400% 7400%;
     -webkit-animation: backgroundGardient 500s ease infinite;
     animation: backgroundGardient 200s ease infinite;
    

}
 @-webkit-keyframes backgroundGardient{
    0%{
        background-position: 0% 83%
    }
    50%{
        background-position: 100% 18%
    }
    100%{
        background-position: 0% 83%
    }
}
@keyframes backgroundGardient{
    0%{
        background-position: 0% 83%
    }
    50%{
        background-position: 100% 18%
    }
    100%{
        background-position: 0% 83%
    }
}
div#leftPosText{
 position:absolute;
 padding:2vh;
 background-color:black;
 width:20vw;
 height:50vh;
 font-size:calc(5vh + 5vw);
 display:flex;         /* Parent becomes a flex container */
 align-items:center;   /* Alignment will inherit to children */
}
p#rot{
 transform-origin:center center;
 transform:rotate(-90deg);
 color:white;
 text-align:center; 
 position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
div#mainTextOne{
 background-color: #ecf0f1;
 width:80vw;
 text-align:center;
 left:calc(20vw + 4vh);
 position:absolute;
}

<Doctype>
<html>
<meta charset='utf-8'>
<head>

</head>
<body>
<div id='random'>
</div>
<div id='overlayStart'></div>
<div id='headText'><p id='FrontText'>Hello!</p></div>
<div id='leftPosText'><p id='rot'>Hi</p></div>
<div id='mainTextOne'>hi</div>

</body>
</html>

关于javascript - 在 div 的中心位置 p，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49695469/

javascript - 在 div 的中心位置 p

上一篇：css - 如何在 SQL 语句中放置 div 类？

下一篇：jquery - 编辑页脚 FooTable