How do I center my code in the exact middle of the page/window?

Question

I'm making a very simple web page but i need help positioning it in the center. How would I go about vertically and horizontally centering this? I have tried several other posts on here but none seem to work so it would be great if some could help me based on my specific code.

I provided the HTML below:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
  <title>
    example &mdash; example &amp; example
  </title>
  <meta name="apple-mobile-web-app-capable" content="yes"/>
  <meta name="mobile-web-app-capable" content="yes"/>
  <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
  <link rel="stylesheet" href="/assets/stylesheets/main.css">
  <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
<style>
body {
  font-family: 'Dosis';
}
</style>
</head>
<body>
   <div style="text-align: center; font-size:16px; text-transform: uppercase;">
     example.IO
   <br>
   USA
   <br><br>
   example &amp; example
   <br>
   coming soon 2018
   <br><br>
   <a href="mailto:example5@gmail.com" style="color: black; font-weight: 600; text-decoration: none;">support@example.io</a>
   <br><br>
   <a href="https://example.company.io" style="color: black; font-weight: 600; text-decoration: none;">purchase a example</a>
   <br>
   <a href="https://example.company.io" style="color: black; font-weight: 600; text-decoration: none;">purchase examples2</a>
   <br>
   <br>
  </div>
</html>

Possible duplicate of [Best way to center a
on a page vertically and horizontally?](https://stackoverflow.com/questions/356809/best-way-to-center-a-div-on-a-page-vertically-and-horizontally) — Daniel Beck, Jan 04 '18 at 04:04

score 1 · Answer 1 · answered Jan 04 '18 at 04:09

1

just try that

body > div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

answered Jan 04 '18 at 04:09

Mohamed hesham

130
1
12

This is my preferred method too. On a small screen it could end up cutting off the edges depending on the content but I wouldn't sweat it. – JasonB Jan 04 '18 at 04:15
1

yes in that case he can use for height `@media only screen and (max-height:/*height*/){}` and for the width too – Mohamed hesham Jan 04 '18 at 04:17

score 0 · Accepted Answer · answered Jan 04 '18 at 04:13

Give a class name to your main div and use position absolute.

.content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<head>
  <meta charset="utf-8">
  <title>
    example &mdash; example &amp; example
  </title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <link rel="stylesheet" href="/assets/stylesheets/main.css">
  <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
  <style>
    body {
      font-family: 'Dosis';
    }
  </style>
</head>

<body>
  <div class="content" style="text-align: center; font-size:16px; text-transform: uppercase;">
    example.IO
    <br> USA
    <br><br> example &amp; example
    <br> coming soon 2018
    <br><br>
    <a href="mailto:example5@gmail.com" style="color: black; font-weight: 600; text-decoration: none;">support@example.io</a>
    <br><br>
    <a href="https://example.company.io" style="color: black; font-weight: 600; text-decoration: none;">purchase a example</a>
    <br>
    <a href="https://example.company.io" style="color: black; font-weight: 600; text-decoration: none;">purchase examples2</a>
    <br>
    <br>
  </div>

@JoeCranney im not quite sure i understand u. do you have a css file ? if not just add the `.content` code to the ` — Hash, Jan 04 '18 at 04:31

score 0 · Answer 3 · answered Jan 04 '18 at 04:16

To horizontally center a block element (like ), use margin: auto;

.center {
    margin: auto;
    width: 50%;
    border: 3px solid green;
    padding: 10px;
}

.center {
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
}

<head>
  <meta charset="utf-8">
  <title>
    example &mdash; example &amp; example
  </title>
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <link rel="stylesheet" href="/assets/stylesheets/main.css">
  <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet">
  <style>
    body {
      font-family: 'Dosis';
    }
  </style>
</head>

<body>
  <div class="center" style="text-align: center; font-size:16px; text-transform: uppercase;">
    example.IO
    <br> USA
    <br><br> example &amp; example
    <br> coming soon 2018
    <br><br>
    <a href="mailto:example5@gmail.com" style="color: black; font-weight: 600; text-decoration: none;">support@example.io</a>
    <br><br>
    <a href="https://example.company.io" style="color: black; font-weight: 600; text-decoration: none;">purchase a example</a>
    <br>
    <a href="https://example.company.io" style="color: black; font-weight: 600; text-decoration: none;">purchase examples2</a>
    <br>
    <br>
  </div>

score 0 · Answer 4 · answered Jan 04 '18 at 04:26

css

.outer-box {
 height: 100vh;
 dispaly: flex;
 width: 100%;
 justify-content: space-around;
}
.inner-box {
 display: block;
 position : relative;
 width: auto;
}

html

<div class="outer-box">
    <div class="inner-box" style="text-align: center; font-size:16px; text-transform: uppercase;">
        example.IO
        <br> USA
        <br><br> example &amp; example
        <br> coming soon 2018
        <br><br>
        <a href="mailto:example5@gmail.com" style="color: black; font-weight: 600; text-decoration: none;">support@example.io</a>
        <br><br>
        <a href="https://example.company.io" style="color: black; font-weight: 600; text-decoration: none;">purchase a example</a>
        <br>
        <a href="https://example.company.io" style="color: black; font-weight: 600; text-decoration: none;">purchase examples2</a>
        <br>
        <br>
      </div>
</div>

score 0 · Answer 5 · answered Jan 04 '18 at 04:48

Consider using flexbox to control your centering.

<body>
  <div class="content">
    example.IO
    <br>
    USA
    <br><br>
    example &amp; example
    <br>
    coming soon 2018
    <br><br>
    <a href="mailto:example5@gmail.com" style="color: black; font-weight: 600; text-decoration: none;">support@example.io</a>
    <br><br>
    <a href="https://example.company.io" style="color: black; font-weight: 600; text-decoration: none;">purchase a example</a>
    <br>
    <a href="https://example.company.io" style="color: black; font-weight: 600; text-decoration: none;">purchase examples2</a>
    <br>
    <br>
  </div>
</body>

and then css that ties to the .content class name referenced in the HTML above:

body {
  min-height: 100vh;
  margin: 0;
}

.content {
  text-align: center; 
  font-size:16px;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

How do I center my code in the exact middle of the page/window?

5 Answers5