假设我们有一个
<div id="1">
<h1 id="2">Some Text</h1>
<h1 id="3">Some Text</h1>
</div>
然后在 CSS 中将这些元素放在一个矩形上
#1{
width:50%;
heght:50%;
background-image: linear-gradient(to top right, #ff4741 , #f8a2a1);
margin-left: auto;
margin-right: auto;
}
然后我想将 2 <h></h> 居中在我的矩形的正中心.-.
我怎样才能做到这一点，以便在调整页面大小时，该内容将保留在我的矩形的中心？
如果我尝试
#2{
position: absolute;
text-align: center;
left:50%
}
文本开始从页面中间而不是我的元素中间开始绘制，如果我这样做了 left:25%;这将是我与页面相关的元素的中间，它实际上会从中间点开始向右绘制，而不是居中。
那我该怎么做呢？
这是我目前拥有的实际代码，我的问题是标题，在不同的屏幕尺寸上，标题上的文本未在其矩形中居中。
#header {
position: fixed;
left: 0%;
top: 0%;
height: 5%;
width: 100%;
background-color: white;
font-family: 'Roboto', sans-serif;
font-size: 1em;
color: #555;
}
#logo {
position: absolute;
left: 5%;
top:20%;
font-size: 1em;
}
.headref {
position: absolute;
left: 50%;
top: 20%;
margin-left: 2%;
text-align: justify;
}
.headelemet {
position: relative;
}
.AccentLine {
position: fixed;
left: 0%;
height: 2.5%;
width: 100%;
background-color: #ff4741;
}
a {
color: inherit;
text-decoration: none;
}
a:hover {
color: #00A0C6;
text-decoration: none;
cursor: pointer;
}
#logo_show_off{
position:absolute;
left:0%;
top:5.8%;
height: 90%;
width: 100%;
background-image: linear-gradient(to top right, #ff4741 , #f8a2a1);
}
.logo{
margin-top: 5%;
display: block;
margin-left: auto;
margin-right: auto;
height: 25%;
}
#mascotLogo{
height:45%;
}
#MyLogo{
position: absolute;
font-family: 'Fjalla One', sans-serif;
font-size: 3em;
color:white;
text-align: center;
right:60%;
top:20%;
}
#MyMascot{
position: absolute;
font-family: 'Fjalla One', sans-serif;
font-size: 3em;
color:white;
text-align: center;
left:60%;
top:60%;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Ionut.E portfolio</title>
<link href="https://fonts.googleapis.com/css?family=Oswald|Roboto|Fjalla+One" rel="stylesheet">
<link href="https://www.1001fonts.com/home-planet-bb-font.html" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="header.css">
<link rel="stylesheet" type="text/css" href="mainLogo.css">
</head>
<body>
<div id="logo_show_off">
<h1 id="MyLogo">THIS IS MY LOGO LOGO</h1>
<img id = "mainLogo" class = "logo" src = "Images/Logo.png">
<h1 id="MyMascot">THIS IS MY MASCOT LOGO</h1>
<img id = "mascotLogo" class = "logo" src = "Images/mascot_logo_png.png">
</div>
<!––HEADER––>
<div class="AccentLine"></div>
<div id="header">
<strong id="logo">IONUT.E</strong>
<strong class="headref headelemet">
<a href="index.html">Home </a>
</strong>
<strong class="headref headelemet">
<a href="index.html">JavaScript </a>
</strong>
<strong class="headref headelemet">
<a href="index.html">Graphic Design </a>
</strong>
<strong class="headref headelemet">
<a href="index.html">Visual Design </a>
</strong>
<strong class="headref headelemet">
<a href="index.html">Contact me </a>
</strong>
</div>
<!––HEADER––>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
<h1>test</h1>
</body>
</html>最佳答案
您可以在 .container 元素上使用 text-align:center 将 h1 block 级元素居中，或者您可以将h1 元素中的内容
使用 text-align: center。
.container {
height: 50%;
background-image: linear-gradient(to top right, #ff4741 , #f8a2a1);
margin: 0 auto;
text-align: center;
width: 50%;
}<div class="container">
<h1>Some Text</h1>
<h1>Some Text</h1>
</div>关于html - 在其他 CSS 元素中居中 CSS 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51920614/