How to center and middle positioned a div element on webpage?

Question

I have this code but div over the edge of webpage.

<html>
 <head>
  <style type="text/css">
   body {
    height: 100%;
    width: 100%;
      margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
   }
   .content {
    text-align:center;
    display: table-cell;
    vertical-align: middle;
       padding-left: 40px;
    padding-right: 40px;
    padding-top: 50px;
    padding-bottom: 50px;
    letter-spacing: 1px;
   }
   code {
    font-family: "Sans Mono", "Consolas", "Courier", monospace;
    font-size: 12px;
   }
   .code-container {
    width: 100%;
    position: relative;
    
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 1), 0px 2px 25px rgba(0, 0, 0, 0.6);
   }
   .code-numbers {
    font-family: "Sans Mono", "Consolas", "Courier", monospace;
    font-size: 12px;
    float: left;
    color: rgb(128, 128, 128);
    border-right: 1px solid rgb(128, 128, 128);
    width: 15px;
    padding: 0px;
    padding-left: 20px;
    padding-right: 5px;
    user-select: none;
    text-align: right;
   }
   .code-line {
    font-family: "Sans Mono", "Consolas", "Courier", monospace;
    font-size: 12px;
    float: right
    padding: 0px;
    padding-left: 7px;
    padding-right: 30px;
    white-space: pre;
    text-align: left;
    overflow: auto;
            }
  </style>
 </head>
 <body>
  <div class="content">
   <div class="code-container"><div class="code-numbers">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br></div><div class="code-line">:local iname "ether2";
ip firewall mangle
add action=mark-connection chain=prerouting comment=CommentABCDEF in-interface=$iname new-connection-mark=CommentABCDEF protocol=tcp
add action=mark-connection chain=postrouting comment=D-FUP-Upload new-connection-mark=D-FUP-Upload out-interface=$iname protocol=tcp
add action=mark-packet chain=prerouting comment=CommentERRWWRHEWRHR connection-mark=CommentABCDEF in-interface=$iname new-packet-mark=CommentERRWWRHEWRHR passthrough=no protocol=tcp
add action=mark-packet chain=prerouting comment=Comment2462436246234 connection-mark=CommentABCDEF in-interface=$iname new-packet-mark=Comment2462436246234 passthrough=no protocol=tcp
add action=mark-packet chain=prerouting comment=Comment35437345434263426 connection-mark=CommentABCDEF in-interface=$iname new-packet-mark=Comment35437345434263426 passthrough=no protocol=tcp

system scheduler
add interval=2s name=D-FUP-Processor on-event=D-FUP-Processor policy=ftp,reboot,read,write,policy,test,password,sniff,sensitive start-time=startup
   </div></div>
  </div>
 </body>
</html>

Currently, it goes beyond the page border and I do not want to go beyond the edge of the page. I wanted div window center in width and middle in height on webpage but i dont have idea how.

Any ideas?

Code have on demo on JSFiddle server: Demo jsfidle

Possible duplicate of [How do I vertically center text with CSS?](https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css) — Tom Lous, Jan 17 '19 at 13:23

score 0 · Answer 1 · answered Jan 17 '19 at 13:16

0

You need to add a fixed width, to replace the 100%, in order for it to stop going off the page (as the content inside it is really big). You can use media queries to change this width depending on the screen size if you need it to be fully responsive.

.code-container {
    width: 500px;
}

In order for it to be placed in the center of the screen add the following code the 'content' class div.

.content {
    display:block;
    margin:auto;
}

Edit: https://jsfiddle.net/fojumaz1/

answered Jan 17 '19 at 13:16

MattHamer5

1,431
11
21

Curious, why the fixed width if he wants responsive? – Ricky Jan 17 '19 at 13:33
A smaller percentage would work too (e.g. 90%). Think it's just my personal preference, I tend to use fixed widths and then change it on the different screen sizes (1200, 992, 768, >767). – MattHamer5 Jan 17 '19 at 13:38
1

I guess if it works, but you would ultimately be typing twice as much code than is necessary. – Ricky Jan 17 '19 at 13:44
Yes it is good solution but how modify for center on height (middle) for totally center? My test but no center on vertically http://jsfiddle.net/fojnvxa0 – truefriend-cz Jan 22 '19 at 05:38
Any news please? – truefriend-cz Feb 13 '19 at 04:29
@truefriend-cz Have a look at this, https://stackoverflow.com/questions/8865458/how-do-i-vertically-center-text-with-css – MattHamer5 Feb 13 '19 at 09:24

Ricky · Answer 2 · 2019-01-28T11:00:02.540

Here is an updated snippet with what you wanted, you had a few errors which affected it, generally in regards to your box sizing and defined widths.

https://jsfiddle.net/b5ryhg4e/

body {
  height: 100%;
  width: 100%;
  margin: 0 auto;
  padding: 0px 0px 0px 0px;
}

.content {
  text-align: center;
  margin: 0 auto;
  padding-top: 40px;
  letter-spacing: 1px;
}

code {
  font-family: "Sans Mono", "Consolas", "Courier", monospace;
  font-size: 12px;
}

.code-container {
  width: 90%;
  margin: 0 auto;
  position: relative;
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 1), 0px 2px 25px rgba(0, 0, 0, 0.6);
}

.code-numbers {
  font-family: "Sans Mono", "Consolas", "Courier", monospace;
  font-size: 12px;
  float: left;
  color: rgb(128, 128, 128);
  border-right: 1px solid rgb(128, 128, 128);
  width: 15px;
  padding: 0px;
  padding-left: 20px;
  padding-right: 5px;
  user-select: none;
  text-align: right;
}

.code-line {
  font-family: "Sans Mono", "Consolas", "Courier", monospace;
  font-size: 12px;
  float: right padding: 0px;
  padding-left: 7px;
  padding-right: 30px;
  white-space: pre;
  text-align: left;
  overflow: auto;
}

<div class="content">
  <div class="code-container">
    <div class="code-numbers">1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br></div>
    <div class="code-line">:local iname "ether2"; # WAN Interface /ip firewall mangle add action=mark-connection chain=prerouting comment=CommentABCDEF in-interface=$iname new-connection-mark=CommentABCDEF protocol=tcp add action=mark-connection chain=postrouting comment=D-FUP-Upload
      new-connection-mark=D-FUP-Upload out-interface=$iname protocol=tcp add action=mark-packet chain=prerouting comment=CommentERRWWRHEWRHR connection-mark=CommentABCDEF in-interface=$iname new-packet-mark=CommentERRWWRHEWRHR passthrough=no protocol=tcp
      add action=mark-packet chain=prerouting comment=Comment2462436246234 connection-mark=CommentABCDEF in-interface=$iname new-packet-mark=Comment2462436246234 passthrough=no protocol=tcp add action=mark-packet chain=prerouting comment=Comment35437345434263426
      connection-mark=CommentABCDEF in-interface=$iname new-packet-mark=Comment35437345434263426 passthrough=no protocol=tcp /system scheduler add interval=2s name=D-FUP-Processor on-event=D-FUP-Processor policy=ftp,reboot,read,write,policy,test,password,sniff,sensitive
      start-time=startup
    </div>
  </div>
</div>

I would recomend looking more into box sizing, heres a good place to start: http://www.tipue.com/blog/center-a-div/

As a further edit in regards to your comments and what you wanted to achieve, please see the below Snippet: https://jsfiddle.net/k2s9Lfng/

You had set a height ratio on the "Content" Div, which threw it out and also the body element should be displayed with "vh" rather than "%" - It now displays central on height and width, You had also set a max-height on the "Code-Container". Also in regards to the margins - for getting it central you should use margin: 0 auto; rather than just margin: auto; - For a better explanation of why this is needed, take a look at this answer: Is there any difference between "margin: 0 auto;" and "margin: auto;"

Yes it is good solution but how modify for center on height (middle) for totally center? My test but no center on vertically https://jsfiddle.net/fojnvxa0/ — truefriend-cz, Jan 22 '19 at 05:36
What do you mean "Totally center"? - It looks centered to me fine... Do you mean you want the inner div to be squared, so it is equallly centered on all sides? — Ricky, Jan 23 '19 at 00:12
Div "content" (with green background) to fill in the full screen and "code-container" horizontally and vertically centered. My next test: https://jsfiddle.net/j5awreLm/ — truefriend-cz, Jan 23 '19 at 07:21
Thanks. But i know many technics for centering. I reading this documents but the problem is that on all the ways of centering it only works on this one single no. And I do not know what it is. I tried to delete the project several times and tried to re-create it in other ways. But I have never achieved the desired goal. A project where I use centering and positioning, the works at several levels you can find http://www.lukaskysela.cf/. It does not only work on this one level. I've spent a few days on it and I have not figured out how to do it. On webpage big red X, gradiend, is ok. But text no — truefriend-cz, Jan 30 '19 at 03:48
... big red X on background in web project webpage is text, and centering is ok. But i do know why It does not work on the next layer. I have tried to do that in the same way and other way as in the your publishing documents. — truefriend-cz, Jan 30 '19 at 03:51

How to center and middle positioned a div element on webpage?

2 Answers2