Text in HTML - Centering

Question

I looked around the Web and couldn't find a solution to this. So I'm going to ask the question myself.

How would I center my text in HTML? I don't mean center as in "text-align:center;" I mean, center it entirely. Like make sure the text is directly in the middle of your webpage on one line. Thanks in advance.

HTML:

<!DOCTYPE html>
<html lang="en">

  <head>

<title>CSGOCarry.com | Win Big!</title>
<link rel="stylesheet" type="text/css" href="csgositecss.css">

  </head>

  <body>

    <div class="container">
      <div class="center">
        <h1>Welcome to CSGOCarry</h1>
      </div>
    </div>

  </body>

</html>

CSS:

body {
  background-image: url("csgocarryback.jpg");
  background-size: 100%;
}

h1 {
  color:white; 
  text-align:center; 
  font-size:50px
}
.container {
}
.center {
}

Note: I have tried making the text centered in the center block. But I'm having trouble doing so.

In css have **border : 50% ;** – Arif Burhan Feb 28 '16 at 03:03 — Arif Burhan, Feb 28 '16 at 03:03
http://stackoverflow.com/a/33049198/3597276 – Michael Benjamin Feb 28 '16 at 03:09 — Michael Benjamin, Feb 28 '16 at 03:09

Josh S. · Accepted Answer · 2016-02-28T03:08:19.810

try this

.container {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
}

body {
  background-image: url("csgocarryback.jpg");
  background-size: 100%;
  background-color: #AAA;
}
h1 {
  color: white;
  text-align: center;
  font-size: 50px;
}
.container {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html lang="en">

<head>

  <title>CSGOCarry.com | Win Big!</title>
  <link rel="stylesheet" type="text/css" href="csgositecss.css">

</head>

<body>

  <div class="container">
    <div class="center">
      <h1>Welcome to CSGOCarry</h1>
    </div>
  </div>

</body>

</html>

Just what I needed. Thank you – Matt Jones Feb 28 '16 at 03:15 — Matt Jones, Feb 28 '16 at 03:15

score 0 · Answer 2 · answered Feb 28 '16 at 03:04

One solution is using flex on the parent element like so:

.container {
    display: flex;
    justify-content: center; /* Horizontally */
    align-items: center; /* Vertically */
}

.center {
    text-align: center;
}

This centers whatever is in the .container both vertically and horizontally.

score 0 · Answer 3 · answered Apr 29 '16 at 18:45

One solution is to put <center> immediately after <body>, and put end it immediately before ending body. Like this: HTML:

    <!DOCTYPE html>
<html lang="en">

  <head>

<title>CSGOCarry.com | Win Big!</title>
<link rel="stylesheet" type="text/css" href="csgositecss.css">

  </head>

  <body>
<center>
    <div class="container">
      <div class="center">
        <h1>Welcome to CSGOCarry</h1>
      </div>
    </div>
</center>
  </body>

</html>

CSS:

  body {
  background-image: url("csgocarryback.jpg");
  background-size: 100%;
}

h1 {
  color:white; 
  text-align:center; 
  font-size:50px
}
.container {
}
.center {
}

I have also created a jsfiddle for you: https://jsfiddle.net/8uafor26/

Text in HTML - Centering

3 Answers3