Menu
Community /Pin to ProfileBookmark
@cootheadJan 05.2022 — #Hi there codewitch,
perhaps, this example will solve your problems...
[b]HTML[/b]
[b]CSS[/b]
[i]coothead[/i]
Centering a div horizontally
Hello.
How can I center one div in the middle of the screen? Mainly I have problems with horizontal centering. If I use absolute positioning, then only the first line is in the middle horizontally. My code:
[code]
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8″/>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>hey I am a title</title>
<style>
html, body {width: 100%; height: 100%;}
.t7{
text-align: center;
position: relative; top: 50%;}
</style>
</head>
<body>
<!– this code centers an element in the middle of the screen –>
<div class=”t7″>
I am a text in the middle of the screen.
<br>
second line
<br>
third line
<br>
fourth line
<br>
fifth line
</div>
</body>
</html>
Thank you.
Sign in
to post a comment3 Comments(s) ↴
0
@cootheadJan 05.2022 — #Hi there codewitch,perhaps, this example will solve your problems...
[b]HTML[/b]
<i>
</i><!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Untitled document</title>
<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->
</head>
<body>
<div id="container">
I am a text in the middle of the screen.
<br>
second line
<br>
third line
<br>
fourth line
<br>
fifth line
</div>
</body>
</html>
[b]CSS[/b]
<i>
</i>html,body {
height: 100%;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
font: normal 1em / 1.5em sans-serif;
}
#container {
width: 96%;
max-width: 60em;
padding: 1em;
margin: auto;
border: 1px solid #999;
box-sizing: border-box;
background-color: #fff;
text-align: center;
animation: rotate 10s linear infinite;
}
@keyframes rotate {
100%{ transform: rotateX(359deg);}
}
[i]coothead[/i]