Center Web page content [duplicate]

Navigation
1

I'm trying to create a simple, resizable HTML page in which the content is all vertically centered.

But I can not centralize text boxes in any way.

This code will initially be the graphical interface of an APP for Android. I am coding so that the content resizes automatically according to the size of the Viewbox.

I'm stuck in this part of centering, and I can not move forward .. I'm starting in HTML5 + CSS3 development and would like to ask your help. Which direction should I take?

Follow the HTML code I'm using 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login</title>
	<link href="css/login.css" rel="stylesheet" type="text/css">
  </head>
  <body>
  <div id="divMain">
  <div id="titleDiv">
    <h1>LOGIN</h1>
  </div>
  <div id="loginDiv">
    <input type="text" value="CPF/CNPJ" id="txtLogin" 
    onFocus="if (this.value=='CPF/CNPJ') this.value = '';" 
    onBlur="if (this.value=='') this.value='CPF/CNPJ';"/>
    <input type="text" value="SENHA" id="txtPassword" 
    onFocus="if (this.value=='SENHA') this.value = ''; this.type='password';" 
    onBlur="if (this.value=='') {this.value='SENHA'; this.type='text';}"/>
  </div>
  </div>
  </body>
</html>

And the code below in CSS: 

html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
body {
	background: #2F6790;
}

#divMain{
	margin: auto;
    width: 50%;
    padding: 10px;
	display:table;
}
#titleDiv{
	justify-content: center;
	align-items: center;
	margin-top: 5%;
	vertical-align:middle;
}

#txtLogin{
	margin: auto;
    width: 30%;
    padding: 10px;
	display:table-cell;
	position:absolute;
	}
#txtPassword{
	margin: auto;
    width: 30%;
    padding: 10px;
	display:table-cell;
	position:absolute;
	margin-top:5%;
	}
#loginDiv{
	justify-content: center;
	align-items: center;
	margin-top: 5%;
	vertical-align:middle;
   }

I'm waiting. Thank you!

    
asked by anonymous 23.11.2016 / 23:05

3 answers

2

I'm no expert, but I hope this helps you:) 

body {
	background: #2F6790;
}
#divMain{
  width: 50%;
  margin: auto;
  padding: 10px;
  text-align: center;
}
#login {
  color: #fff;
}
.field {
  width: 100%;
  margin-bottom: 20px;
  font-size: 1.5em;
  padding: 5px;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
	  <meta http-equiv="X-UA-Compatible" content="IE=edge">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Login</title>
	  <link href="css/login.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="divMain">
      <h1 id="login">LOGIN</h1>
      <input class="field" type="text" placeholder="CNPJ/CPF" id="txtLogin"/>
      <input class="field" type="password" placeholder="Insira sua senha" id="txtPassword"/>
  </div>
  </body>
</html>
    
23.11.2016 / 23:45
0

The above answers give you a blank to get you what you want. But another and much more current option is the use of "CSS flex". Read on. It will help you in many positioning cases.

link

    
24.11.2016 / 03:57
-1

Hello, use "margin: 0 auto;" to center your div.

    
24.11.2016 / 02:21
How to show multiple images selected "input file"? Method with generics in inherited type [closed]