Any tips for how I can place these divs in the center of the page?

Question

I'm a beginner programmer I'm working on a website with my friend Alex, we're both beginners actually, I took on the task of designing the landing page to get some practice in. I want to have these divs which contain nothing but text centered horizontally and vertically (or dead center), I've tried some things other people have suggested on other posts on this site but nothing seems to be working. Could one of you gurus please help me? And thanks in advance :D (I should probably mention that I'm using DW with the Bootstrap framework)

Here's the html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!--GOOGLE FONT-->
     <link href='https://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <link href="css/stylesheet.css" rel="stylesheet" type="text/css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
  </head>
  <body class="background">
    <div id="nav">
        <ul>
            <li><a href=""> About </a></li>
            <li><a href=""> Sign up </a></li>
        </ul>
    </div> 
    <div id="welcome"> 
        <p>TEXT I WANT CENTERED</p>
    </div>
  <div id="best">
        TEXT I WANT BELOW CENTERED TEXT 
    </div>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="js/jquery-1.11.2.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.js"></script>
  </body>
</html>

Heres the css:

@charset "utf-8";
/* CSS Document */
 .background {
     background: url(../img/bg1.jpg) no-repeat 50% 50% fixed;
     margin: 0 auto;
     max-width: 80%;
     min-width: 50%;
     width: 80%;
     height:auto;
     background-size: cover;
     -webkit-background-size: cover;
     -o-background-size: cover;
     -moz-background-size: cover;
 }





 li {
     display: inline;
     letter-spacing: 2px;
     padding-right: 0.5em;
     float: right;
     font-size: 125%;
     font-style:normal;
     font-weight: bold;
     text-transform: uppercase;
     text-decoration:none;
     color:#ffffff;
     text-shadow: 4px 3px 0px #000000, 9px 8px 0px rgba(0,0,0,0.15);
 }

 #welcome {
    font-family: 'Montserrat', sans-serif;
    max-width: 90%;
    min-width: 80%;
    height: 50%;
    font-size: 350%;
    font-style:normal;
    font-weight: bold;
    text-transform:uppercase;
    text-decoration:none;
    text-align: center;
    color:#ffffff;
    position: relative;
    text-shadow: 4px 3px 0px #000000, 9px 8px 0px rgba(0,0,0,0.15);
    z-index: 9998;
 }

 welcome p {
     width: 300px;
     height: 100px;
     padding: 20px;

 }

 #best {
    font-family: 'Montserrat', sans-serif;
    max-width: 100%;
    min-width: 70%;
    font-size: 200%;
    font-style:normal;
    font-weight: bold;
    text-transform:uppercase;
    text-decoration:none;
    text-align:center;
    color:#ffffff;
    position: relative;
    text-shadow: 4px 3px 0px #000000, 9px 8px 0px rgba(0,0,0,0.15);
 }


 p {
     text-align:center;

 }

 a {
     color: #FFFFFF;
 }

 a {
     hover: #2a7315;
     text-decoration: none;
 }

If you are using bootstrap: http://stackoverflow.com/questions/18153234/center-a-column-using-twitter-bootstrap-3 — jmunsch, Nov 21 '15 at 03:51

Asan · Answer 1 · 2015-11-21T03:55:42.317

0

Have you tried adding the class text-center to the div?

edited Nov 21 '15 at 03:55

answered Nov 21 '15 at 03:50

Asan

151
2
16

neoDev · Answer 2 · 2015-11-21T03:59:48.447

0

You can center elements in different ways:

.element {
    display: block;
    margin: 0 auto;
}

or

.parent {
    text-align: center;
}
.child {
    display: inline-block
}

or

.element {
    position: relative/absolute;
    left: 50%;
    margin-left: -20px; (usually minus half size of the element)
}

edited Nov 21 '15 at 03:59

answered Nov 21 '15 at 03:54

neoDev

2,879
3
33
66

Ram · Answer 3 · 2015-11-21T07:16:31.150

0

Add this CSS in your file:

#nav {
  float: left;
  width: 100%;
}

edited Nov 21 '15 at 07:16

answered Nov 21 '15 at 03:56

Ram

130
9

score 0 · Answer 4 · answered Nov 21 '15 at 04:14

There's a ton of ways to do what you're asking, and I would suggest different ones for different contexts.

I find the simplest way is to create a class like this:

.v-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Then just add it to whatever you want to be centered vertically (div, a, p, span, etc), and to center text you can just use text-align:center;

score 0 · Answer 5 · edited Nov 21 '15 at 07:24

0

The following snippet of code works for me:

#welcome, #best{
  margin: 0 auto;
}

edited Nov 21 '15 at 07:24

AppleDelegate

4,269
1
20
27

answered Nov 21 '15 at 06:01

Jamshed Qureshi

73
1
1
9

Any tips for how I can place these divs in the center of the page?

5 Answers5